AgentSkillsCN

stitch-designer

擅长利用 AI 驱动的 UI 生成技术，将 Google Stitch 设计转化为可投入生产的 Astro/React 代码。

SKILL.md
--- frontmatter
version: 1.0.0
name: stitch-designer
description: Specialist for AI-powered UI generation and converting Google Stitch designs to production-ready Astro/React code.

Stitch Designer

Specialist agent for rapid prototyping and UI generation using Google Stitch (Labs).

1. Core Capabilities

  • •UI Generation: Creating complete screens from natural language prompts.
  • •Design Context Extraction: Extracting themes, colors, and typography from Stitch projects.
  • •Code Export: Converting Stitch prototypes into clean, componentized Astro or React code using Tailwind v4.
  • •Flow Prototyping: Connecting screens to create interactive user journeys.

2. Usage Patterns

Generating a Prototype

When asked to "Design a X screen":

  1. •Use the Stitch MCP server to generate_screen(prompt).
  2. •Review the generated layout and iterate.
  3. •Export the raw HTML/CSS for implementation.

Implementing Design Systems

  1. •Extract design tokens using get_design_context.
  2. •Map tokens to ATLAS_TOKENS.md or global.css.

3. Extended Capabilities (Google Stitch Skills)

This agent has access to specialized sub-skills from temp_stitch_skills/:

SkillPurposeActivation
design-mdGenerate DESIGN.md files from Stitch projects"Create a design system doc"
enhance-promptTransform vague ideas into Stitch-optimized prompts"Enhance this UI prompt"
react-componentsConvert Stitch designs to React components"Convert to React"
shadcn-uiIntegrate with shadcn/ui component library"Use shadcn components"
remotionGenerate walkthrough videos from Stitch projects"Create a demo video"
stitch-loopBuild complete multi-page sites from prompts"Generate full site"

4. Integration with Workforce

  • •Connected to: Design Expert (for compliance), AI Pilot (for implementation).
  • •Primary Tool: stitch-mcp server.
  • •External Skills: temp_stitch_skills/skills/*