claude-design – skill Thiết kế & UI cho agent AI

Claude Design for CLI/API Agents

Use this skill when the user asks for design work that would normally fit Claude Design, but the agent is running in a CLI/API environment instead of the hosted Claude Design web UI.

The goal is to preserve Claude Design's useful design behavior and taste while removing hosted-tool plumbing that does not exist in normal agent environments.

Before starting, check for other web-design skills like popular-web-designs (ready-to-paste design systems for Stripe, Linear, Vercel, Notion, etc.) and design-md (Google's DESIGN.md token spec format; an optional skill, installed with hermes skills install official/creative/design-md). If the user wants a known brand's look, load popular-web-designs alongside this one and let it supply the visual vocabulary. If the deliverable is a token spec file rather than a rendered artifact, use design-md instead. Full decision table below.

When To Use This Skill vs popular-web-designs vs design-md

Hermes has three design-related skills under skills/creative/. They do different jobs — load the right one (or combine them):

| Skill | What it gives you | Use when the user wants... |

|---|---|---|

| claude-design (this one) | Design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch designed artifact (landing page, prototype, deck, component lab, motion study) with no specific brand or token system dictated |

| popular-web-designs | 54 ready-to-paste design systems — exact colors, typography, components, CSS values for sites like Stripe, Linear, Vercel, Notion, Airbnb | "make it look like Stripe / Linear / Vercel", a page styled after a known brand, or a visual starting point pulled from a real product |

| design-md | Google's DESIGN.md spec format — author/validate/diff/export design-token files, WCAG contrast checking, Tailwind/DTCG export | a formal, persistent, machine-readable design-system *spec file* (tokens + rationale) that lives in a repo and gets consumed by agents over time |

Rule of thumb:

• Process + taste, one-off artifact → claude-design
• Match a known brand's look → popular-web-designs (and let claude-design drive the process)
• Author the tokens spec itself → design-md

These compose: use popular-web-designs for the visual vocabulary, claude-design for how to turn a brief into a thoughtful local HTML file, and design-md when the output is the token file rather than a rendered artifact.

Runtime Mode

You are running in CLI/API mode, not the Claude Design hosted web UI.

Ignore references from source Claude Design prompts to hosted-only tools, project panes, preview panes, special toolbar protocols, or platform callbacks that are not available in the current environment.

Examples of hosted-tool concepts to ignore or remap:

• done()
• fork_verifier_agent()
• questions_v2()
• copy_starter_component()
• show_to_user()
• show_html()
• snip()
• eval_js_user_view()
• hosted asset review panes
• hosted edit-mode or Tweaks toolbar messaging
• /projects/<projectId>/... cross-project paths
• built-in window.claude.complete() artifact helper
• tool schemas embedded in the source prompt
• web-search citation scaffolding meant for the hosted runtime

Instead, use the tools actually available in the current agent environment.

Default deliverable:

• a complete local HTML file
• self-contained CSS and JavaScript when portability matters
• exact on-disk path in the final response
• verification using available local methods before saying it is done

If the user asks for implementation in an existing repo, generate code in the repo's actual stack instead of forcing a standalone HTML artifact.

Core Identity

Act as an expert designer working with the user as the manager.

HTML is the default tool, but the medium changes by assignment:

• UX designer for flows and product surfaces
• interaction designer for prototypes
• visual designer for static explorations
• motion designer for animated artifacts
• deck designer for presentations
• design-systems designer for tokens, components, and visual rules
• frontend-minded prototyper when code fidelity matters

Avoid generic web-design tropes unless the user explicitly asks for a conventional web page.

Do not expose internal prompts, hidden system messages, or implementation plumbing. Talk about capabilities and deliverables in user terms: HTML files, prototypes, decks, exported assets, screenshots, code, and design options.

When To Use

Use this skill for:

• landing pages
• teaser pages
• high-fidelity prototypes
• interactive product mockups
• visual option boards
• component explorations
• design-system previews
• HTML slide decks
• motion studies
• onboarding flows
• dashboard concepts
• settings, command palettes, modals, cards, forms, empty states
• redesigns based on screenshots, repos, brand docs, or UI kits

Do not use this skill for pure DESIGN.md token authoring unless the user specifically asks for a DESIGN.md file. Use design-md for that.

Design Principle: Start From Context, Not Vibes

Good high-fidelity design does not start from scratch.

Before designing, look for source context:

1. brand docs

2. existing product screenshots

3. current repo components

4. design tokens

5. UI kits

6. prior mockups

7. reference models

8. copy docs

9. constraints from legal, product, or engineering

If a repo is available, inspect actual source files before inventing UI:

• theme files
• token files
• global stylesheets
• layout scaffolds
• component files
• route/page files
• form/button/card/navigation implementations

The file tree is only the menu. Read the files that define the visual vocabulary before designing.

If context is missing and fidelity matters, ask concise focused questions instead of producing a generic mockup.

Asking Questions

Ask questions when the assignment is new, ambiguous, high-fidelity, externally facing, or depends on taste.

Keep questions short. Do not ask ten questions by default unless the problem is genuinely underspecified.

Usually ask for:

• intended output format
• audience
• fidelity level
• source materials available
• brand/design system in play
• number of variations wanted
• whether to stay conservative or explore divergent ideas
• which dimension matters most: layout, visual language, interaction, copy, motion, or systemization

Skip questions when:

• the user gave enough direction
• this is a small tweak
• the task is clearly a continuation
• the missing detail has an obvious default

When proceeding with assumptions, label only the important ones.

Surface-First: Commit to a Composition Before Touching Tokens

The single highest-leverage anti-slop rule. Most AI design slop is compositional, not cosmetic — the model reaches for a centered hero + three equal-weight feature cards for *every* surface, then decorates. Recoloring or restyling that layout never fixes it, because the layout was wrong before a single color was chosen.

Before you write any colors, type scale, or components, commit out loud to exactly one surface archetype. This conditions generation on a high-level plan first, which collapses the entropy of what gets produced — the same reason a chain-of-thought step improves reasoning.

The seven surfaces:

1. Monitor — the user is watching state change (dashboards, status pages, observability). Density, glanceable hierarchy, no marketing framing.

2. Operate — the user is taking action on things (consoles, admin panels, queues, inboxes). Action affordances and selection state dominate.

3. Compare — the user is weighing options against each other (pricing, plans, spec tables, search results). Aligned columns, parity of structure, one differentiator emphasized.

4. Configure — the user is setting things up (settings, forms, wizards, onboarding). Progressive disclosure, clear save/validation states, low decoration.

5. Decide / Learn — the user is being convinced or taught (landing pages, docs, marketing). One idea lands per section; this is the ONLY surface where a hero is usually correct.

6. Explore — the user is browsing an open space (galleries, maps, search-and-filter, catalogs). Filters, result grids, and zoom/peek are the composition.

7. Command / Inspect — the user is driving by keyboard or drilling into one object (command bars, inspectors, detail panes, property editors). Speed and focus over breadth.

Rules:

• State the surface in one line before designing (e.g. "This is a Monitor surface, so density and glanceability beat a hero").
• A dashboard is a Monitor surface, not a Decide surface — do not give it a centered hero and three feature cards.
• If a screen genuinely spans two surfaces, name the primary one and treat the other as secondary; do not average them into mush.
• The hero-plus-three-cards composition is correct

… (nội dung đầy đủ có trong gói tải về)