AgentStack
Browse Sign in
Browse Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Generate Design

skill-lingkejia-agent-skills-generate-design · by lingkejia

Generate an AI-readable DESIGN.md design-system document and matching HTML preview pages from four input types: project code paths, feature screenshots, reference website URLs, and product ideas. Use when Codex needs to extract or invent a reusable visual language, preserve a project's UI style, document colors/typography/layout/components in the same structured format as an example DESIGN.md, or…

↗ Repository
— No reviews yet
0 installs
31 views
0.0% view→install

Install

$ agentstack add skill-lingkejia-agent-skills-generate-design

✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

View the full security report →

Verified badge

Passed review? Show it. Paste this badge into your README, it links to the public security report.

AgentStack Verified badge Links to your public security report.
[![AgentStack Verified](https://agentstack.voostack.com/badges/verified.svg)](https://agentstack.voostack.com/security/report/skill-lingkejia-agent-skills-generate-design)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
○ 4mo ago

Declared compatibility

Claude CodeClaude Desktop

Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.

Preview Execution monitoring

We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.

How agent discovery & health will work →
Are you the author of Generate Design? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Generate Design

Core Workflow

  1. Identify the input mode: project code path, screenshots, reference website URL, product idea, or a combination.
  2. Gather evidence before writing:
  • For code paths, inspect existing UI files, stylesheets, component libraries, design config, screenshots if available, and package dependencies.
  • For screenshots, visually extract palette, typography, layout rhythm, component shapes, density, and interaction states.
  • For URLs, browse the site and capture enough representative pages or states. Use screenshots and source styles when available.
  • For product ideas, infer a fitting design direction from the audience, domain, workflow density, and brand personality.
  1. Read references/design-document-format.md before drafting DESIGN.md.
  2. Read references/input-playbooks.md for the relevant input mode.
  3. Write DESIGN.md in the target project or requested output folder. Keep the format aligned with the reference structure: YAML token block first, then Markdown guidance sections.
  4. Generate preview.html and preview-dark.html from the document:
python3 scripts/generate_preview.py path/to/DESIGN.md --out-dir path/to/output
  1. Open or inspect the previews when possible. Check that colors render, typography samples are legible, cards/buttons/forms are visible, and mobile CSS does not overlap.
  2. Revise DESIGN.md and regenerate previews until the document and visual catalog agree.

Output Contract

Produce these files unless the user asks for different names:

  • DESIGN.md: the reusable design-system document.
  • preview.html: light preview page generated from the design system.
  • preview-dark.html: dark preview page generated from the same tokens.

When the user supplies an existing example DESIGN.md, match its section order and level of detail. Do not copy brand-specific content from the example unless it truly applies to the new target.

Evidence Rules

  • Prefer observed facts over invention for code paths, screenshots, and URLs.
  • Make explicit in Known Gaps when a token or component was inferred.
  • Use token references such as {colors.primary} and {typography.body-md} inside component definitions and prose.
  • Keep component names semantic and reusable: button-primary, top-nav, feature-card, data-table, empty-state, footer.
  • Document default, active/pressed, disabled, focused, success, warning, and error states when visible or necessary.
  • Preserve the user's language in prose sections when the user is working in that language.

Resources

  • references/design-document-format.md: required schema and section order for DESIGN.md.
  • references/input-playbooks.md: extraction/invention guidance for the four supported user input types.
  • scripts/generate_preview.py: deterministic static preview generator for light and dark HTML catalogs.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet, be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills