From magic-powers
Use when creating UI designs, mockups, or prototypes - integrates Google Stitch SDK for visual design generation
npx claudepluginhub kienbui1995/magic-powers --plugin magic-powersThis skill uses the workspace's default tool permissions.
Use Google Stitch to generate visual designs and extract implementable HTML. Stitch creates mockups from text prompts — Claude Code can then read the HTML output and implement it.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Use Google Stitch to generate visual designs and extract implementable HTML. Stitch creates mockups from text prompts — Claude Code can then read the HTML output and implement it.
Key insight: Claude Code can't see images, but CAN read HTML. Stitch generates both.
npm install @google/stitch-sdkSTITCH_API_KEY environment variable setscripts/stitch.mjs (included in this plugin)1. Brainstorm design requirements
2. Generate mockup with Stitch
3. Extract HTML from Stitch
4. Review and refine HTML
5. Implement in your framework
cd ~/.claude/scripts # or plugin scripts dir
node stitch.mjs generate <project-id> "A dashboard with sidebar navigation, user stats cards, and a data table"
node stitch.mjs get-html <project-id> <screen-id>
This returns HTML that Claude Code can read and understand — layout, components, colors, typography.
# Edit existing screen
node stitch.mjs edit <project-id> <screen-id> "Make the sidebar collapsible and add dark mode toggle"
# Generate variants
node stitch.mjs variants <project-id> <screen-id> "Try different color schemes"
Use the HTML as reference to implement in your framework. The HTML shows:
| Command | Description |
|---|---|
list-projects | List all Stitch projects |
list-screens <projectId> | List screens in a project |
generate <projectId> "<prompt>" | Generate new screen |
get-html <projectId> <screenId> | Get HTML output |
edit <projectId> <screenId> "<prompt>" | Edit existing screen |
variants <projectId> <screenId> "<prompt>" | Generate design variants |
If you have the UI UX Pro Max skill installed (project-level), combine:
# Get design system rules
python3 .claude/skills/ui-ux-pro-max/scripts/search.py palette modern
python3 .claude/skills/ui-ux-pro-max/scripts/search.py font clean
# Generate Stitch mockup following those rules
node stitch.mjs generate <project-id> "Dashboard using [palette] colors and [font] typography"
This skill is best used with the ui-designer agent (Sonnet) which has Stitch integration and frontend design expertise.