Evergreen

Evergreen

Skills

Skills are slash commands you run inside Claude Code. Each one handles a specific part of the product design workflow — you describe what you want, and Claude does the rest.

How to use them

Open Claude Code in your project and type a skill command. You can run them bare (e.g. /prd) and Claude will ask for details, or provide context directly (e.g. /wireframe a dashboard with analytics).

Skills are aware of each other. If you've already run /prd, then /wireframewill use your PRD as context. They're designed to chain together — see the Workflow page for the recommended order.

Define

Clarify what you're building and why.

Product Requirements

Generate a structured PRD from a product idea. Covers goals, features, user flows, scope, and open questions.

Output: docs/prd.md

Market Research

Competitive analysis, market landscape, and user insights. Searches the web for real data and synthesizes findings.

Output: docs/research.md

Build

Set the foundation and create your prototype.

/design-system

Configure colors, typography, spacing, and radius. Audit your codebase for inconsistencies. Export a design system doc.

Output: globals.css + docs/design-system.md

Rapid Prototype

Generate interactive wireframes from a description. Creates pages with navigation, forms, and placeholder content. Speed over polish.

Output: src/app/ + src/components/wireframe/

Frontend Design

Create and refine UI components and pages. Three modes: component, page, and refine. Uses shadcn/ui and the design system.

Output: src/components/ + src/app/

Integrate

Connect with external design tools.

Figma Integration

Pull designs from Figma, extract tokens, build components from frames, and sync code-connect mappings. Requires Figma MCP.

Output: Components + globals.css tokens

Ship

Deploy and collect feedback.

Deploy & Feedback

Deploy to Vercel with one command. Optionally add a feedback widget or dedicated feedback page to collect user responses.

Output: Live URL + optional feedback route