今日已更新 222 条资讯 | 累计 40667 条内容
关于我们

标签:#Claude

找到 360 篇相关文章

AI 资讯

Claude Code + 300 Docs: I Built a Personal Knowledge DB With 4 Retrieval Layers. 3 Broke.

I have 312 docs in my personal knowledge DB. Tweets, arxiv abstracts, Zenn articles, blog posts, YouTube transcripts. Claude Code writes to it, reads from it, and cites out of it every day. That number is not a brag. It is the reason I finally have data on which retrieval strategy holds up in an LLM-native workflow. I tried four. The one I ship is the one I tried last and expected to lose. Three of the four broke in ways that are worth naming, because the broken versions are what most tutorials will tell you to build. The setup, so we agree on what got benchmarked The knowledge DB is called context-forge internally. It is a folder, some markdown files, and a SQLite table. Claude Code adds to it via CLI, searches via CLI, and reads the underlying markdown directly when it needs the full text. It took eight hours to build the CLI, three months to accumulate the 312 documents at a pace of one to five per day, and about 15 minutes a day of my time to keep it flowing. Each doc has metadata: source URL, a credibility score 1-5, one to three categories, a short summary. The autoregistration pipeline is Claude Code itself: I paste a URL, it fetches, summarizes, scores, categorizes, writes the markdown, commits, and updates the SQLite index. The pipeline is not the interesting part. The retrieval strategy is. I ran each of the four strategies for two weeks against the same day-to-day tasks: writing a chapter, answering "what did that person say about X," and building an argument for a decision. Same me, same DB, different retriever. Layer 1: pure semantic RAG (vector embeddings). Broke at 200 docs The first version was the textbook answer. Embed every document with a sentence transformer, store the vectors in SQLite with a similarity index, retrieve the top-k on every query. This is the pattern Silicon Slopes covers for code-level RAG and Anthropic itself has an issue open for a built-in version . It worked at 50 docs. It worked at 100. Around 200 documents it started retrie

2026-08-04 原文 →
AI 资讯

I gave Claude read access to my Google marketing stack. Now I just ask it questions.

Opening Google Analytics to answer one question is a special kind of tax. You know the number is in there. You also know it's four clicks, two date pickers and a dimension dropdown away, and by the time you've found it you've forgotten what you wanted it for. So I built Metrifyr : a remote MCP server that puts my Google marketing stack behind my AI agent. Nothing to install: connect it once (Claude, Cursor, VS Code, any MCP client), then ask the question in plain language and it goes and gets the number. It's in the Cursor marketplace and the official MCP Registry, and the catalog has grown past a hundred tools, though, as you'll see, no single session loads them all. What's actually connected Metrifyr isn't a wrapper around one API. It federates the whole Google marketing surface behind a single MCP connection: Analytics 4 : run reports, realtime, metadata, compare periods. Plus the admin side: create properties, data streams, conversion events, custom dimensions and metrics. Search Console : search analytics, URL inspection, sitemaps. AdSense : accounts, earnings, payment history, revenue by keyword. Tag Manager : read and audit containers, tags, triggers, variables. Google Ads : campaign planning. Connect it once, and the agent can reach across all of them in a single train of thought. "Which landing pages lost the most organic traffic last quarter, and were any of them earning AdSense revenue?" is one question to me. It's Search Console and Analytics and AdSense to the machine, joined without me opening a single tab. Raw numbers are the boring part Pulling a GA4 report over MCP is table stakes. The part I actually care about is the layer on top, the analysis tools that answer the questions you'd otherwise pay an SEO consultant to run: Content decay scan : which pages are quietly bleeding traffic month over month. Striking-distance optimizer : the queries ranking positions 11 to 20, one nudge away from page one. Keyword cannibalization : where two of your own pag

2026-08-04 原文 →
AI 资讯

Agent-Reach absorbed Bilibili's 412s — your agent kept working

Bilibili's 412 Incident, Explained: How v1.5.0 Absorbed It In June 2026, Bilibili quietly began rejecting yt-dlp with HTTP 412 errors. Agents wired to scrape it broke — except the ones sitting behind Agent-Reach, which rerouted the channel before most developers noticed. Agent-Reach is a local, MIT-licensed capability layer that gives shell-capable coding agents live internet access by selecting and routing to upstream CLIs rather than proxying data itself . When Bilibili started 412-blocking yt-dlp in June 2026, v1.5.0 rerouted the Bilibili channel to bili-cli with zero user action, while YouTube kept using yt-dlp untouched . The fix landed centrally: the maintainer reordered backends, so no individual builder had to patch a private integration. Quick Answer: When Bilibili began returning HTTP 412 to yt-dlp in June 2026, Agent-Reach v1.5.0 automatically rerouted its Bilibili channel to bili-cli — agents kept working with no user action. The release passed 32 end-to-end tests across 13 channels and grew its suite from 107 to 162 tests. The framing shift matters: v1.5.0 describes itself as a capability layer, not a tool collection. Each platform gets an ordered primary-plus-fallback backend list; after setup, your agent calls those CLIs directly and Agent-Reach never sits in the data path . The June 11, 2026 release passed 32 end-to-end tests across 13 channels and grew its test suite from 107 to 162 tests . Platform Primary backend Fallback Web pages Jina Reader — YouTube yt-dlp — GitHub gh CLI — RSS feedparser — Bilibili bili-cli OpenCLI (subtitles) Twitter/X twitter-cli OpenCLI Reddit OpenCLI rdt-cli XiaoHongShu OpenCLI xhs-cli LinkedIn linkedin-mcp Jina Reader Global search Exa via mcporter — "capability layer: multi-backend routing + real doctor + OpenCLI" — Agent-Reach v1.5.0 release framing (source: Agent-Reach CLAUDE.md ). The behavior is easy to model. The following minimal snippet — which was executed and returns exit 0 — illustrates the "absorb and keep wo

2026-08-04 原文 →
AI 资讯

Token Cost Optimization: The Complete Guide to Building Cost-Efficient LLM Applications

Part 1 : Understanding Token Economics, Hidden Costs, and the Fundamentals Every AI Engineer Must Know Table of Contents Introduction Why Token Cost Optimization Matters More Than Ever Understanding What a Token Really Is How LLM Providers Charge for Tokens Input Tokens vs Output Tokens Why "Cheap Prompts" Can Become Expensive Hidden Sources of Token Costs The Real Cost of Production AI Systems How Token Costs Scale with Users The Cost Optimization Mindset Key Takeaways Introduction If you have ever built an AI application using GPT, Claude, Gemini, Llama, or another large language model, you've probably celebrated the moment your first prompt worked. The model answered intelligently, users loved the experience, and everything seemed perfect. Then came the cloud bill. What initially looked inexpensive suddenly became one of the largest operational costs in your application. Many developers assume AI infrastructure is expensive because of GPUs. Surprisingly, for many production applications, tokens—not GPUs—become the biggest recurring expense . Every prompt, every response, every retrieved document, every conversation history, and every AI agent interaction consumes tokens. Those tokens translate directly into cost. Imagine building an AI customer support chatbot. It serves 500 users during testing, and costs seem negligible. After launch, the application attracts 50,000 daily users. Each interaction now includes system prompts, conversation history, retrieved documents, tool outputs, and generated responses. Without careful optimization, token usage grows exponentially—and so does your bill. This is why token cost optimization is no longer just a performance concern. It has become a core engineering discipline. Just as software engineers optimize CPU and memory, AI engineers must optimize tokens. This guide is designed to help you understand the economics behind token usage before diving into optimization techniques. By mastering these fundamentals, you'll be able

2026-08-04 原文 →
AI 资讯

Fixing Visual Discrepancies with Claude Code + Chrome Extension

📝 Originally published (in Japanese) at forge.workstyle.tech . You've got a code that looks correct when read, but when you open it in the browser, it's slightly different from the mockup - this "visual discrepancy" is the most troublesome part of UI development. A slight CSS specification, nesting of elements, and flex wrapping. Discrepancies that cannot be noticed by statically reading the code together will only appear when actually rendered. Until now, it was necessary for a human to open the screen in a browser, compare it with the mockup image, and verbally communicate the differences to the AI. This workflow replaces the process of "humans visually seeing and verbalizing" by showing the screen to the AI agent itself via the browser . By combining Claude Code and browser automation extensions (Chrome extensions), we will "see" the screen actually rendered on localhost, compare it with the mockup, identify layout discrepancies, and fix them. Why is it necessary to "show the actual screen"? There are limitations to just handing over the code for UI review. It's difficult for both humans and AI to completely reproduce the final rendering result in their minds from the code. In particular, these discrepancies are difficult to detect just by looking at the code. Layout skeleton discrepancies - One area is crushed when it's supposed to be a 2-column layout, or the vertical split ratio is different from the mockup, resulting in structural-level discrepancies Element placement errors - A preview that should be in the upper right column is wrapped around to the bottom Unexpected wrapping and overflow - The component wraps due to insufficient width, changing the impression from the mockup These discrepancies cannot be determined without seeing the "rendering result" as a fact. That's why we show the actual screen to the AI. Workflow: Show, Compare, and Fix 1. Provide the mockup as a baseline First, provide the target mockup image to the AI and share the baseline that "t

2026-08-04 原文 →
AI 资讯

XML Tagging in Prompts: The Secret to Getting Better Output from Claude and GPT

XML Tagging in Prompts: The Secret to Getting Better Output from Claude and GPT A simple structuring trick that turns messy, unpredictable LLM outputs into clean, reliable ones. If you've spent any time writing prompts for Claude, GPT, or any other large language model, you've probably hit this wall: your prompt works fine for a simple ask, but the moment you pack in multiple instructions — some context, a few examples, formatting rules, and the actual task — the model starts mixing things up. It answers the wrong part of the question. It ignores your formatting instructions. It treats your example output as part of the actual task. The fix is almost embarrassingly simple: wrap your prompt sections in XML tags. Why XML Tags Work So Well LLMs are trained on enormous amounts of code, documentation, and markup. XML (and HTML) syntax is deeply embedded in that training data, which means models are very good at recognizing where one tagged section ends and another begins. Unlike plain paragraphs — where the boundary between "here's my context" and "here's my instruction" is fuzzy — a tag creates an unambiguous boundary. Anthropic actually recommends this explicitly for Claude: wrapping distinct parts of a prompt (instructions, context, examples, output format) in tags like <instructions> , <context> , <example> , and <output_format> measurably improves consistency, especially in longer or more complex prompts. Think of it like the difference between handing someone a wall of text versus handing them a form with labeled fields. Both contain the same information, but one is far easier to parse correctly — for a human, and for a model. A Before-and-After Example Without tags: Summarize the article below in 3 bullet points. Keep it under 50 words. Use a neutral tone. Here's an example of the style I want: "- Company X raised $10M in Series A funding." Now here's the article: [long article text] The model has to guess where the instructions end and the article begins — and wi

2026-08-04 原文 →
AI 资讯

How to build an MCP server, step by step

Short answer To build an MCP server: install an official MCP SDK, declare your tools with typed inputs, optionally expose resources and prompts, run the server over stdio or HTTP, then connect an MCP client like Claude and test it. A minimal Python server is about ten lines; the work is in choosing what to expose and validating every input. This is the build . For what MCP is, its three primitives, and how it differs from an API, start with what is the Model Context Protocol — this page assumes that and goes straight to code. Prerequisites You need very little to get a server running locally: A language with an official SDK. Python and TypeScript are the most mature; the same protocol is also implemented for other languages. This guide uses the Python SDK (the secondary path most people search for), with notes on where the TypeScript SDK is equivalent. Python 3.10 or newer and uv (recommended) or pip to manage the environment. An MCP client to test against — Claude Desktop, or the MCP Inspector that ships with the SDK. You do not need cloud credentials to build or run the server itself. Conceptually a server exposes three things — tools (model-callable functions), resources (readable data), and prompts (reusable templates) . The steps below add them in that order. Exact SDK signatures evolve, so treat the snippets as the current shape and check the live docs before shipping. Which spec revision this builds against. The code here targets MCP revision 2025-11-25 — the revision the spec's versioning page still names as the current protocol version. Revision 2026-07-28 is published and reworks the wire format substantially. A server built against 2025-11-25 stays conformant today; what the new revision changes for a server author is set out below, so you can build now and plan the move. Step 1: scaffold the server Create a project, install the SDK, and write the smallest server that runs. With uv : uv init weather cd weather uv venv source .venv/bin/activate # Install t

2026-08-03 原文 →
AI 资讯

Claude Code + OpenRouter: The Setup Guide That Actually Explains Things

So you have heard people rave about Claude Code. Maybe you have also heard people mention OpenRouter in the same breath, usually followed by some combination of environment variables and a screenshot of a terminal. If you are new to any of this, it can feel like everyone skipped a step and jumped straight to the jargon. This guide is that missing step. We will go slow where it matters, explain the confusing bits, and by the end you will actually understand what is happening instead of just copy pasting commands and hoping. The two things, quickly Claude Code is Anthropic's terminal coding agent. It reads your files, edits code, runs commands. By default it talks straight to Anthropic's servers. OpenRouter is a switchboard. It a switchboard for AI models. Instead of every app needing its own separate connection to every AI provider, OpenRouter sits in the middle and lets you route requests to different models through one account, one dashboard, and one place to watch your spending. (Even free and open source models!) You can check out all the models provided by OpenRouter here . Important honesty check: OpenRouter's own docs say this combo is only guaranteed to work well with Anthropic's own models. You're not really swapping Claude's brain out here, you're mostly rerouting the pipe it talks through. Quick vocab check: "OpenAI compatible" Claude Code sends requests in Anthropic's format. Some servers only understand OpenAI's format instead. Point Claude Code at one of those by mistake and you get garbled errors, like mailing a French letter to someone who only reads Spanish. OpenRouter has an endpoint that speaks Anthropic's format natively, so no translation step, no separate proxy needed. Wait, do I use zsh or bash? How would I even know This question stops more beginners than anything else in this guide, and it is a fair one. Here is how to check in ten seconds. Open your terminal and type this, then press enter: echo $SHELL You will get one of these back: Somethi

2026-07-31 原文 →
AI 资讯

Telechat: self-host Claude AI across Telegram/WhatsApp/Slack with one npm install

Built something the r/selfhosted crowd might appreciate: Telechat — a self-hosted Claude AI bot that connects to Telegram, WhatsApp, Slack, and web chat from a single process. Why self-hosted matters here Anthropic launched Claude Code Channels recently — Claude on Telegram/Discord, managed by Anthropic. It works great, but every message goes through their cloud. Telechat takes the opposite approach: Runs on your machine (laptop, VPS, RPi, NAS — anything that runs Node.js or Python) Messages flow: phone → your server → Anthropic API → back to phone No relay server, no telemetry, no analytics SQLite for conversation history, stored locally The only external call is to Anthropic's chat-completions API for inference Your messages, your hardware, your data. Install # npm npm install -g telechatai && telechat init # pip pip install telechatai && telechat init # Docker docker run -v ~/.telechat:/config telechatai/telechat telechat init walks you through an interactive setup — API key, bot tokens for whichever platforms you want, model preferences, budget limits. What it does Multi-platform — Telegram, WhatsApp, Slack, Web Chat. All running simultaneously from one process. Smart model routing — Routes queries to the cheapest Claude model that handles them. Saves ~60% on API costs vs always using Sonnet. Budget caps — Per-user daily and monthly limits. Set $5/day and forget about it. Persistent memory — SQLite-backed. Context carries across conversations. Desktop Bridge — If you run Claude Code on your desktop and it needs approval for a destructive action, you get a push notification on your phone. Approve/deny remotely. Media support — Send images for analysis, generate images if you have DALL-E configured. Resource usage Light. Single process, ~50MB RSS idle, spikes briefly during inference calls. SQLite means no database server. The bottleneck is always the Anthropic API latency, not local compute. Self-hosting tips Run behind a reverse proxy (Caddy/nginx) for HTTPS if

2026-07-31 原文 →
AI 资讯

We added mobile approvals to our CLI AI tool -- approve Claude's destructive commands from your phone

Quick share of a feature we built into Telechat (self-hosted Claude AI bot) that's been surprisingly useful for devops workflows: Desktop Bridge with mobile approvals . The problem You're running Claude Code (or any Claude-powered agent) on your workstation. It's refactoring a module, running tests, deploying to staging. You step away for coffee, a meeting, or just to stretch. Claude hits a tool call that needs human approval: rm -rf build/ (wants to clean the build directory) git push --force (rebase gone wrong) kubectl delete pod (scaling decision) Without you at the keyboard, it just... waits. For however long you're gone. The solution Telechat's Desktop Bridge connects your Claude Code session to your phone via Telegram, WhatsApp, or Slack. When Claude needs approval: You get a push notification with exactly what Claude wants to execute You see the full command and context You tap Approve or Deny Claude continues (or backs off) All from your phone. No VPN, no SSH, no laptop. Why this matters for devops Unattended CI/CD with a human gate. Run Claude as part of your pipeline for code review, test generation, or deployment prep. Gate the destructive steps on mobile approval instead of blocking the pipeline until someone checks Slack. Overnight tasks. Kick off a large refactoring or migration analysis before bed. If Claude needs a decision at 2 AM, you'll see it in the morning and approve from your phone. It doesn't lose context while waiting. Pair programming while mobile. Reviewing Claude's work from your phone between meetings. Approve the good stuff, deny the risky stuff, add context via chat. How it works Telechat runs on your workstation alongside Claude Code. It acts as a bridge between Claude's approval prompts and your messaging app. When Claude's tool-use loop hits a human-approval checkpoint, Telechat intercepts it, formats the request, and sends it to your Telegram/WhatsApp/Slack. Your response flows back and unblocks the agent. No cloud relay — the brid

2026-07-31 原文 →
AI 资讯

I built a self-hosted alternative to Claude Code Channels -- here's why

When Claude Code Channels launched, I was stoked — Claude on my phone, finally. Then I hit the limitations: Only Telegram and Discord. I live in WhatsApp (most of the world does). Everything routes through Anthropic's servers. Fine for most people, but I work with clients who have strict data policies. Requires Pro subscription. I was already spending less via API keys for my usage pattern. No budget controls. I wanted to give Claude access to my team without worrying about runaway costs. So I built Telechat — same idea (Claude on your phone), completely different architecture. It's self-hosted. Runs as one process on your machine. Messages go from your phone → your server → Anthropic API → back. No relay, no middleware, no telemetry. Your conversations never touch any server I control. 4 platforms, not 2. Telegram, WhatsApp, Slack, and web chat. All from one process. Smart model routing. This is the cost killer. Telechat looks at each message and routes it to the cheapest model that can handle it. "What time is it in Tokyo?" → Haiku ($0.001). "Review this PR" → Opus. In practice, ~70% of my messages hit Haiku or Sonnet. Saves about 60% vs always using Sonnet. Per-user budget caps. Daily and monthly limits. 80% warning, hard cutoff at 100%. Essential when you're sharing with a team. Desktop Bridge — this is the feature that keeps surprising people. When Claude Code is running on your desktop and wants to do something destructive (delete a file, run a risky command), you get a push notification on your phone. Tap approve or deny. Keep working from the couch while Claude codes at your desk. Setup is literally: npm install -g telechatai && telechat init Walk through the interactive setup, add your API key and bot tokens, done. I'm not going to pretend it's better than Channels in every way. Channels wins on zero-setup convenience and being a first-party Anthropic product. But if you need WhatsApp, want self-hosted privacy, or care about cost control, give Telechat a lo

2026-07-31 原文 →
AI 资讯

Mastering Claude Code Configs: `CLAUDE.md` vs `.claude/rules/`

When configuring Claude Code (or Claude-driven AI coding assistants) in your projects, structuring your instructions efficiently is key to getting accurate code generation while keeping token consumption low. Understanding when to use a single CLAUDE.md versus modular .claude/rules/ files will help keep your AI assistant sharp, focused, and predictable. The Core Hierarchy & Scope Claude Code looks for configurations across multiple levels: ├── ~/.claude/ # User / Global level (applies to all your projects) └── project-root/ ├── CLAUDE.md # Global project level (loaded into every session) ├── .claude/rules/ # Modular & scoped rules (loaded selectively) └── sub-app/ └── CLAUDE.md # Sub-directory / Monorepo scope CLAUDE.md (The Global Cheat Sheet)Think of CLAUDE.md as the main ReadMe for the AI. It provides high-level context and essential project memory. When to use CLAUDE.md:Common CLI Commands: Build, test, lint, and run scripts (npm test, docker compose up). Core Architecture: Tech stack summary, overall folder structure, and design principles. Global Rules: Non-negotiable guidelines that apply project-wide (e.g., "Strict TypeScript, no any"). Project Context: E-Commerce Web App Build & Test Commands Build: npm run build Test single file: npx jest src/components/Button.test.tsx Lint: npm run lint High-Level Guidelines All UI components must use React 19 functional syntax. Never hardcode secrets or environment variables. .claude/rules/ (Modular & Path-Scoped Rules)As projects grow, packing every guideline into CLAUDE.md bloats the prompt context and reduces overall compliance. The .claude/rules/ directory lets you create modular, topic-specific, or path-scoped rules (in .yml or .md). When to use .claude/rules/:Path-Specific Rules (globs): Guidelines that apply only to certain files (e.g., API routes vs. React components). Domain Separation: Splitting rules into dedicated files (testing.yml, security.yml, db-migrations.yml). Token Optimization: Prevent loading backen

2026-07-31 原文 →
AI 资讯

How I Decide What to Build Next at a One-Person Studio

Every idea gets run through a one-sentence test before it is allowed to count as a real idea at all Most ideas die for one of three specific reasons, not vague lack of enthusiasm An idea only earns a build slot once it has survived contact with a real, repeated problem A maybe-later list holds the rest on purpose, and I check it far less often than people assume The One-Sentence Test I Run Before Anything Becomes an Idea I get more ideas than I could ever build. That is not a boast, it is a liability if I do not manage it, because every one of those ideas feels exciting for about twenty minutes, and excitement is a terrible filter for what is actually worth my evenings. So before an idea is allowed to sit on any kind of list, it has to pass one test: can I describe the smallest useful version of it in a single sentence, with no "and" in the middle. That sounds small, but it kills more ideas than any other step in the process. "A tool that tracks my Claude usage and also shows analytics and also has a community feature" does not pass. "A tool that warns me before I hit my usage limit" passes. The first sentence is a pitch for a platform. The second sentence is a pitch for a Tuesday evening. I want the second kind, because the second kind is the one I actually finish. I did not always work this way. Early on, an idea earned space on my list the moment it sounded interesting, and my list grew into a graveyard of half-described plans that all needed a paragraph to explain. A paragraph is a warning sign now, not a feature. If I need more than one sentence to say what the smallest version does, the idea has not actually taken shape yet, it has just acquired enthusiasm, and those are different things. The test also forces honesty about scope early, before I have sunk any real time into something. An idea that needs "and" is usually two or three ideas wearing a trenchcoat, and pulling them apart at the sentence stage is far cheaper than pulling them apart three weeks into a

2026-07-31 原文 →
AI 资讯

If Claude Code is expensive or hard to access for you, try OpenCode

If Claude Code is expensive or hard to access for you, try OpenCode . It’s an open-source AI coding agent that works in the terminal, desktop, and as a VS Code extension. Free models available: DeepSeek V4 Flash Free (best option) MiMo v2.5 Free Nemotron 3 Ultra Free North Mini Code Free Big Pickle Ling-3.0-flash Free Laguna S 2.1 Free These free models work well for most daily coding tasks. Note: They have daily usage limits (they reset every day). How to install (Windows): First, make sure Node.js is installed on your system. Then run: npm install -g opencode-ai After installation, run: opencode You can also install the VS Code extension for a smoother experience. OpenCode lets you use free models or connect any API key you want. It’s flexible, open-source, and a solid alternative to Claude Code. I tested it myself. Setup is easy and the free models are usable for real work. Link: https://opencode.ai/

2026-07-30 原文 →
AI 资讯

Mastering Impeccable: AI Skill Design for Frontend Architecture

Generative coding agents are powerful, but left to their own devices, they default to visual clutter: predictable gradients, uncalibrated spacing, and bloated, outdated component structures. Impeccable is a design skill package, created by Paul Bakaus, that runs directly inside Claude Code, Gemini CLI, and Codex CLI (as well as Cursor and GitHub Copilot) to enforce strict aesthetic guardrails, with the same rule set recompiled for each harness. By applying deliberate skill design, you can steer agents away from generic patterns and push them toward precise, high-craft web experiences. What Is Skill Design, and Why Does It Matter for AI Agents? Skill design is the practice of building deterministic rails for non-deterministic AI models. Instead of endlessly asking an agent to "make it look better" or "improve performance," you inject a compiled DESIGN.md and functional directive that the agent must follow on every iteration. Impeccable builds on Anthropic's frontend-design skill and adds 23 commands that give you a shared design vocabulary with the model, plus 58 deterministic anti-pattern detection rules (default Inter font, purple-to-blue gradients, cards nested in cards, gray text on colored backgrounds, rounded icon tiles above every heading, and more). It turns the AI from a junior developer guessing at your aesthetic into a strict implementer of the visual rules you actually define. Implementing Impeccable's Constraints for Modern Web Apps Precision is everything when you wire this workflow in. Impeccable respects your existing design system rather than overwriting it: when it runs, it scans your codebase (tokens, components, Tailwind config) and loads your brand rules from your own DESIGN.md , instead of imposing a generic aesthetic. So if your identity is built on a minimalist look, the right way to enforce it is to declare it yourself in that file — a limited green-and-pink palette, a dark base background at #0c1624 , typography and tone of voice — so every

2026-07-30 原文 →
AI 资讯

Dominando Impeccable: para mantener coherencia y consistencia de diseño

Los agentes de código generativo son potentes, pero si se les deja a su libre albedrío, por defecto producen un desorden visual: degradados predecibles, espaciados sin calibrar y estructuras de componentes pesadas y obsoletas. Impeccable es un paquete de habilidades de diseño, creado por Paul Bakaus, que opera directamente dentro de Claude Code, Gemini CLI y Codex CLI (además de Cursor y GitHub Copilot) para imponer estrictos límites estéticos, con un mismo conjunto de reglas recompilado para cada harness. Al aplicar un diseño de habilidades deliberado, puedes alejar a los agentes de los patrones genéricos y obligarlos a generar experiencias web precisas y de alto nivel visual. ¿Qué es el diseño de habilidades y por qué es importante para los agentes de IA? El diseño de habilidades ( skill design ) es la práctica de construir rieles deterministas para modelos de IA no deterministas. En lugar de pedirle interminablemente a un agente que "haga que se vea mejor" o "mejore el rendimiento", inyectas un DESIGN.md compilado y directivas funcionales que el agente debe respetar en cada iteración. Impeccable construye sobre la habilidad frontend-design de Anthropic y añade 23 comandos con un vocabulario de diseño compartido, más 58 reglas deterministas de detección de antipatrones (fuente Inter por defecto, degradados morado-azul, tarjetas anidadas, texto gris sobre fondos de color, iconos redondeados sobre cada encabezado, entre otros). Transforma a la IA de ser un desarrollador junior que intenta adivinar tu estética a un implementador estricto de las reglas visuales que tú definas. Cómo implementar las restricciones de Impeccable para aplicaciones web modernas Al integrar este flujo de trabajo, la precisión lo es todo. Impeccable respeta tu sistema de diseño existente en lugar de sobrescribirlo: al ejecutarse, escanea tu código base (tokens, componentes, configuración de Tailwind) y carga las reglas de marca desde tu propio DESIGN.md , en vez de imponer una estética genéri

2026-07-30 原文 →