How to make Claude Code build new pages that match your existing app

Описание и применение

Пошаговый процесс, позволяющий Claude Code создавать страницы, полностью соответствующие существующей системе дизайна проекта, избегая конфликтов с цветами, шрифтами и компонентами.

Задача

Claude Code often generates pages that clash with an existing codebase, adding new fonts, colors, and styles that do not match the current design.

Результат

Using the match-existing-style workflow reduced hard‑coded hex colors from 17/30 to 0, eliminated new fonts, increased use of project token classes, and cut page length from 499 to 247 lines.

Рабочий процесс

• 1. Provide a design source of truth (e.g., design-system.md) or rely on existing pages if no doc exists.
• 2. Survey the project: read design rules, tokens, component kit, two sibling pages, and copy voice.
• 3. Write a short style fingerprint (token names, fonts, radius, spacing, components, snippet).
• 4. Build by reusing existing components and tokens, avoiding new fonts, colors, or button styles.
• 5. Self‑check with grep for raw colors, palette classes, <button> tags, and font imports, and compare visually with sibling pages.

Доказательства

Ask Claude Code to "add a pricing page" to a project that already has ten pages, and you often get a beautiful page that belongs to a different website.

Источник

I hit this enough times across my own side projects ... that I stopped fixing pages after the fact and started fixing the instructions instead.

Источник

The fix is to reverse the order: read the project first, write a short summary of its style, build only from what already exists, then check.

Источник

I ran a small test: same project, same prompt, two subagents in separate git worktrees. One followed the official frontend-design skill, the other followed match-existing-style.

Источник

In round 2 the generic-skill page also dropped the site's header (logo, language switch, sign-in) entirely, and came in at 499 lines versus 247.

Источник