Claude Skills for a Designer — Page 2
Codex Image Generation
Generate, edit, and prepare practical raster image assets directly within a project workflow.
UI/UX Consultation Guide
A style-neutral, interview-first UI/UX skill that listens to your product and brand before helping you define a design system, review an interface, or emit design rules.
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.
OpenChamber Settings UI Patterns
A skill that makes AI agents build OpenChamber Settings pages from shared primitives, with localization and search-registry rules enforced instead of hand-rolled markup.
Web Asset Generator
Generate favicons, PWA app icons, and social sharing images from logos, text, or emojis — with matching HTML meta tags delivered automatically.
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.
Artifacts Builder — Multi-Component Frontend Artifact Suite
Scaffold and bundle complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui, shipped as a single shareable file.
Slides Grab Image-Native Skill
In Claude Code or Codex, generate whole-slide raster images one page at a time against reference template pages, for maximum fidelity to corporate templates, brand layouts, and visual density.
Web Clone Methodology
A real-source-first website cloning methodology with executable recon scripts — stop copying AI-hallucinated code.
Superdesign Design Skill
Gives coding agents real design judgment so the UI they ship looks considered, not AI-slop — producing shippable frontend, presentations, and graphics.
HTML Anything: Turn Anything Into a Page
Turns any file, folder, URL, or service export into a beautiful, interactive, shareable single-file HTML page instead of a long Markdown answer.
Design Auditor Skill
A Claude skill that audits Figma files, code, and screenshots against 19 professional design rules and returns actionable, scored reports.
Hand-Drawn Diagrams Skill
Turn one natural-language prompt into hand-drawn Excalidraw architecture, workflow, and UX wireframe diagrams, with a hosted edit link, stroke-by-stroke animation, and PNG export.
Dark Theme React UI System
A reusable foundation for dark React interfaces with Tailwind styling, glassmorphism, and restrained motion.
Frontend Design Skill
Steers AI away from generic template aesthetics toward distinctive, production-grade interfaces — components, pages, posters, and full web apps that actually look designed.