Design & Frontend Claude Skills
imagegen-frontend-mobile — Mobile App Visual Generation Skill
An Agent Skill for AI assistants that generates premium, non-generic mobile app screen concepts and flows, with a focus on clean hierarchy and readable typography.
Kami · Paper
One typesetting system for professional documents and landing pages: warm parchment, ink-blue accent, serif-led hierarchy — resumes, one-pagers, white papers, slides, and product pages.
Distinctive Frontend Design
Build an intentional visual identity for interfaces that should not feel templated.
OfficeCLI Morph-PPT Skill
A skill for AI agents to craft PowerPoint decks with buttery-smooth Morph transitions — continuous motion across slides, no Office installation needed.
Design Is (Dieter Rams Audit)
Audit designs against Dieter Rams' ten principles, score with evidence, decide NEW/REFINE/REDESIGN, and hand off a ready-to-run /make-plan prompt.
VS Code Design Philosophy
Turn vague UI discomfort into concrete fixes using shared values, principles, and design moves.
Codex Image Generation
Generate, edit, and prepare practical raster image assets directly within a project workflow.
Playground Builder
Turn complex visual or structural choices into a live, self-contained HTML explorer.
Codex Image Studio
Generate and edit production-ready raster assets for projects.
VS Code CSS Layout Standards
Build reliable VS Code-style CSS layouts and text truncation behavior
Figma Code Connect Mapper
Link Figma components to their code implementations for traceable design-code consistency.
Figma Blank File Creator
Create a blank Figma Design or FigJam file in the selected drafts folder.
Figma Design Implementer
Turn Figma specifications into production-ready frontend code with verifiable visual fidelity.
Guizang Web Deck Skill
Turn articles and ideas into browser-ready, single-file HTML presentations.
GPT Image 2 Creative Workflow
A structured GPT Image 2 workflow for turning visual briefs into generated or edited images.
Blog Image Creative Director
Generate and edit publication-ready blog visuals with Gemini-powered prompt orchestration.
Production Frontend UI Engineering
Guides AI coding agents to build accessible, responsive, design-system-aligned production interfaces.
baoyu-design: Run Claude Design Locally as an Agent Skill
Package the design engine behind claude.ai/design into an Agent Skill, so Cursor, Claude Code, or any file-capable agent can produce polished, self-contained HTML mockups, prototypes, wireframes, and slide decks locally.
Dark Theme React UI System
A reusable foundation for dark React interfaces with Tailwind styling, glassmorphism, and restrained motion.
VS Code Theme and Accessibility Styling
Build consistent, focus-visible, high-contrast VS Code interfaces with theme tokens.
Frontend Design Review
Review or create production-ready frontend interfaces with stronger usability, craft, accessibility, and visual character.
Hatch Pet Animation Workshop
Turn character or brand cues into validated, packageable Codex animated pets.
Expo Native UI Guide
Helps Expo developers build responsive screens with Apple-informed styling and a native-feeling experience.
Figma Design System Rules Builder
Generates project-specific rules for consistent Figma-to-code implementation.