Design Agent

Design consultation skill for AI agents. Invoke when another agent, skill, or user requests design review, design tokens, or UI美化 (UI beautification). Provid...

Security Scan

The skill's description matches its behavior, but the runtime instructions reference external tools, networked services, and CLI commands (npx/typeui.sh, design-extractor.com, canvas snapshot) while the metadata declares no required binaries or installs — this mismatch and the use of third-party endpoints is worth review before installing.

Purpose & Capability

The declared purpose (design consultation, generating DESIGN.md, tokens, VLM review) aligns with the content of SKILL.md and the included reference files. However, the instructions call out tools that require runtime capabilities (npx/typeui.sh, design-extractor.com, canvas snapshot tooling) even though the registry metadata lists no required binaries or install steps. The lack of declared runtime requirements (node/npm, network access, or a canvas tool) is an inconsistency.

Instruction Scope

Instructions stay within the design domain (extract tokens, merge with base tokens, write DESIGN.md, run VLM review). They do instruct interacting with external services (design-extractor.com, lnkd.in links) and running 'npx typeui.sh pull', and to capture snapshots via a 'canvas' tool. Those steps may send project URLs, rendered images, or content to external parties or trigger package downloads at runtime. The SKILL.md does not advise sanitizing sensitive content before sending to third-party services.

Install Mechanism

This is instruction-only (no install spec), which is low-risk in principle. But the runtime guidance expects use of external CLI tooling (npx typeui.sh) and a 'canvas' snapshot action. Because the metadata declares no required binaries or installs, there's a mismatch: callers may be prompted to run commands that download and execute third-party code (npm package) without an explicit install step or vetting guidance. Also some referenced links use lnkd.in shorteners rather than direct project domains, which obscures destinations.

Credentials

The skill requests no environment variables, no credentials, and no config paths. There are no demands for unrelated secrets or system-wide credentials in the manifest or SKILL.md.

Persistence & Privilege

always is false and the skill is user-invocable with normal autonomous invocation allowed. The skill instructs writing a DESIGN.md into a project directory, which is coherent for its purpose and does not attempt to modify other skills or system-wide settings.

What to consider before installing

This skill appears to do what it says (generate DESIGN.md and run a VLM-driven visual review), but there are a few things to check before installing or invoking it in an automated agent: - Verify runtime capabilities: the SKILL.md expects running 'npx typeui.sh' and a 'canvas' snapshot tool. Confirm your agent environment has Node/npm (if you plan to use typeui) and a sanctioned canvas/visual snapshot tool, or else the steps will fail or download code at runtime. - Vet third-party tools: 'typeui.sh' will be fetched via npx and will execute code from the npm registry; review that package and the design-extractor.com service before sending project URLs or content. Avoid pasting private URLs or sensitive content into external extractors. - Shortened links: the SKILL.md contains lnkd.in shorteners — expand and verify those targets are trustworthy before following them. - Data exposure: the workflow may involve sending rendered screenshots or project content to a vision model or external site. If you have private or sensitive designs, sanitize or avoid sending them to untrusted endpoints. - Metadata mismatch: consider asking the skill author to declare required binaries (node/npm, or the canvas tool) and to provide an explicit install or opt-in guidance so callers understand what network or runtime side effects to expect. If you are comfortable approving network calls and occasional npx installs for design tooling and you trust the referenced third-party services, the skill is coherent with its purpose. If you need a locked-down environment, require the author to add explicit dependency declarations and safer, non-networked alternatives before enabling it.

Design Agent — Structured Design for AI Outputs

What This Skill Does

When another agent or skill produces UI output, it can call this skill to get a structured design brief — real design tokens, color systems, typography, spacing — that transforms generic AI output into distinctive, intentional design.

Design Prompt Sources

Use these tools to generate a DESIGN.md for a given project or style:

Tool	Use
design-extractor.com	Paste any URL → structured DESIGN.md with tokens
design/prompts	Browse 31+ rendered design styles, grab AI prompts
typeui.sh	npx typeui.sh pull [style] — CLI, 57+ design skills
awesome-design-md	Real DESIGN.md files from Stripe, Linear, Vercel etc.

Core Design System (defaults — override per project)

Stored in references/design-tokens.md:

• Color palette (hex + use)
• Typography scale
• Spacing system
• Component patterns
• Animation/transition defaults

Workflow

Another agent requests design improvement
         │
         ▼
1. Identify the output medium (HTML/React/Newsletter/PDF/etc.)
2. Identify the target aesthetic or reference site
3. Use design-extractor.com or typeui.sh to generate design tokens
4. Merge with references/design-tokens.md base system
5. Write a DESIGN.md into the project or skill directory
6. Downstream agents read DESIGN.md → apply consistently

VLM Review Loop (MANDATORY before finalising)

Before any design is marked complete, run it through a VLM review iteration:

Step 1 — Generate initial output

Apply design tokens → produce HTML/React/PDF/etc.

Step 2 — Capture screenshot

Use canvas tool to snapshot the rendered output:

canvas(action=snapshot, node=<target>, width=1280)

Step 3 — VLM review

Send the snapshot to the vision model with the design brief:

Review this against the DESIGN.md tokens:
- Are colors consistent with the palette?
- Is typography on-scale (no arbitrary sizes)?
- Is spacing on the 8px grid?
- Are component states correct (hover, active)?
- Any visual anti-patterns (orphaned text, broken hierarchy)?
Flag specific issues and suggested fixes.

Step 4 — Iterate

If VLM flags issues → apply fixes → resnapshot → re-review. Repeat until VLM returns "design is consistent with tokens" or all flagged issues resolved.

Step 5 — Final sign-off

Only mark complete when VLM confirms token consistency. Log iteration count in the DESIGN.md.

Iteration log:
- v1: Initial render — 3 issues flagged (orphaned h3, wrong accent color, spacing off grid)
- v2: Fixed accent + orphaned h3 — spacing still off
- v3: All clear. Approved.

VLM Review Prompts (by output type)

HTML/Newsletter:

Check: color palette, typographic hierarchy, spacing grid alignment,
component borders, dark/light mode if applicable. Flag any ad-hoc values.

PDF (rendered as screenshot):

Check: font sizes on scale, line spacing, margin consistency,
image placement, page break handling. Note any text overflow or orphans.

React/UI Component:

Check: button/input sizes match tokens, color applied from palette,
hover/active states visible, spacing between elements on grid.

Creating a Project DESIGN.md

# Extract design from a reference URL
# (use design-extractor.com manually, paste result into project)

# Or pull a known style from typeui
npx typeui.sh pull minimal    # clean typographic
npx typeui.sh pull editorial  # magazine/longform
npx typeui.sh pull brutalist  # high contrast, raw
npx typeui.sh pull luxury     # dark, gold accents

Design Review Checklist (before shipping UI)

• Colors match design tokens (no ad-hoc hex values)
• Typography uses defined scale (no arbitrary font sizes)
• Spacing follows the system (8px grid or defined scale)
• Component states covered (hover, active, disabled, error)
• Dark mode / light mode if applicable
• Responsive breakpoints defined
• Animation durations defined (no magic numbers like 0.3s without tokens)

Integration with Other Skills

This skill is designed to be called by other skills. Any skill that produces visual output should reference this skill before generating UI.

See references/integration-guide.md for how other skills should call design-agent.

Key Files

File	Purpose
references/design-tokens.md	Base design token system
references/integration-guide.md	How other skills call design-agent
assets/design-prompt-template.md	DESIGN.md template for new projects
assets/example-design-standards/	Example extracted from Vercel/Linear/Stripe