Workflow
Evergreen skills are designed to chain together. Each one builds on the output of the previous, guiding you from idea to deployed prototype. You can start anywhere, but this is the recommended path.
Define
/prdStart by describing what you want to build. Claude generates a structured product requirements document covering goals, features, user flows, and scope.
Research
/researchValidate your idea against the market. Claude searches for competitors, analyzes their strengths and weaknesses, and identifies design opportunities.
Foundation
/design-systemSet your visual identity. Configure colors, typography, spacing, and component styles. This becomes the source of truth for everything you build.
Prototype
/wireframeRapidly generate interactive wireframes. Claude creates pages, navigation, and basic interactions from your PRD. Speed over perfection.
Refine
/designPolish your wireframes into high-fidelity UI. Create new components, improve layouts, and fine-tune visual hierarchy using the design system.
Sync (optional)
/figmaIf you work in Figma, pull designs into code or push component mappings back. This step is optional — you can build entirely in code.
Deploy
/shipShip your prototype to Vercel with one command. Optionally set up a feedback widget or page to collect responses from testers.
Tips
- You don't have to follow this order. Need to jump straight to a wireframe? Go for it.
- Skills are aware of each other. If a PRD exists,
/wireframewill use it as context. - Run any skill multiple times to iterate. Each run refines the previous output.
- You can always talk to Claude directly without a skill — just describe what you need.