ck:frontend-design
GitHub将设计稿、视频或描述转化为高质量前端代码，支持截图复刻、3D体验及原型开发。通过多模态分析提取样式，结合设计参数生成生产级界面，强调美学与精准还原。
Trigger Scenarios
Install
npx skills add phuc-nt/my-translator --skill ck:frontend-design -g -y
SKILL.md
Frontmatter
{
"name": "ck:frontend-design",
"license": "Complete terms in LICENSE.txt",
"metadata": {
"author": "claudekit",
"version": "1.0.0"
},
"description": "Create polished frontend interfaces from designs\/screenshots\/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop."
}
Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention.
Workflow Selection
Choose workflow based on input type:
| Input | Workflow | Reference |
|---|---|---|
| Screenshot | Replicate exactly | ./references/workflow-screenshot.md |
| Video | Replicate with animations | ./references/workflow-video.md |
| Screenshot/Video (describe only) | Document for devs | ./references/workflow-describe.md |
| 3D/WebGL request | Three.js immersive | ./references/workflow-3d.md |
| Quick task | Rapid implementation | ./references/workflow-quick.md |
| Complex/award-quality | Full immersive | ./references/workflow-immersive.md |
| Existing project upgrade | Redesign Audit | ./references/redesign-audit-checklist.md |
| From scratch | Design Thinking below | - |
All workflows: Activate ck:ui-ux-pro-max skill FIRST for design intelligence.
Precedence: When anti-slop rules (below) conflict with ck:ui-ux-pro-max recommendations (e.g., Inter font, AI Purple palette, Lucide-only icons), substitute with alternatives from ./references/anti-slop-rules.md unless the user explicitly requested the conflicting choice.
Screenshot/Video Replication (Quick Reference)
- Analyze with
ck:ai-multimodalskill - extract colors, fonts, spacing, effects - Plan with
ui-ux-designersubagent - create phased implementation - Implement - match source precisely
- Verify - compare to original
- Document - update
./docs/design-guidelines.mdif approved
See specific workflow files for detailed steps.
Design Dials
Three configurable parameters that drive design decisions. Set defaults at session start or let user override via chat:
| Dial | Default | Range | Low (1-3) | High (8-10) |
|---|---|---|---|---|
DESIGN_VARIANCE |
8 | 1-10 | Perfect symmetry, centered layouts, equal grids | Asymmetric, masonry, massive empty zones, fractional CSS Grid |
MOTION_INTENSITY |
6 | 1-10 | CSS hover/active states only | Framer Motion scroll reveals, spring physics, perpetual micro-animations |
VISUAL_DENSITY |
4 | 1-10 | Art gallery — huge whitespace, expensive/clean | Cockpit — tiny paddings, 1px dividers, monospace numbers everywhere |
Usage: These values drive specific rules. At DESIGN_VARIANCE > 4, centered heroes are overused — force split-screen or left-aligned layouts. At MOTION_INTENSITY > 5, embed perpetual micro-animations. At VISUAL_DENSITY > 7, remove generic cards and use spacing/dividers.
See ./references/bento-motion-engine.md for dial-driven SaaS dashboard implementation.
Design Thinking (From Scratch)
Before coding, commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
CRITICAL: Execute with precision. Bold maximalism and refined minimalism both work - intentionality is key.
Aesthetics Guidelines
- Typography: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
- Color: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
- Motion: CSS-first, anime.js for complex (
./references/animejs.md). Orchestrated page loads > scattered micro-interactions. - Spatial: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
- Backgrounds: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
- Assets: Generate with
ck:ai-multimodal, process withck:media-processing
Asset & Analysis References
| Task | Reference |
|---|---|
| Generate assets | ./references/asset-generation.md |
| Analyze quality | ./references/visual-analysis-overview.md |
| Extract guidelines | ./references/design-extraction-overview.md |
| Optimization | ./references/technical-overview.md |
| Animations | ./references/animejs.md |
| Magic UI (80+ components) | ./references/magicui-components.md |
| Anti-slop forbidden patterns | ./references/anti-slop-rules.md |
| Redesign audit checklist | ./references/redesign-audit-checklist.md |
| Premium design patterns | ./references/premium-design-patterns.md |
| Performance guardrails | ./references/performance-guardrails.md |
| Bento motion engine (SaaS) | ./references/bento-motion-engine.md |
Quick start: ./references/ai-multimodal-overview.md
Anti-Patterns (AI Slop)
Strongly prefer alternatives to these LLM defaults. Full rules: ./references/anti-slop-rules.md
Typography — Avoid Inter/Roboto/Arial. Prefer: Geist, Outfit, Cabinet Grotesk, Satoshi
Color — Avoid AI purple/blue gradient aesthetic, pure #000000, oversaturated accents. Use neutral bases with a single considered accent.
Layout — Avoid 3-column equal card feature rows, centered heroes at high variance, h-screen. Use asymmetric grids, split-screen, min-h-[100dvh].
Content — Avoid "John Doe", "Acme Corp", round numbers, AI copy clichés ("Elevate", "Seamless", "Unleash"). Use realistic names, organic data, plain specific language.
Effects — Avoid neon/outer glows, custom cursors, gradient text on headers. Use tinted inner shadows, spring physics.
Components — Avoid default unstyled shadcn, Lucide-only icons, generic card-border-shadow pattern at high density. Always customize, try Phosphor/Heroicons, use spacing over cards.
Quick check: See the "AI Tells" checklist in ./references/anti-slop-rules.md before delivering any design.
Performance: Animation and blur rules in ./references/performance-guardrails.md
Remember: Claude is capable of extraordinary creative work. Commit fully to distinctive visions.
Version History
- 3495f99 Current 2026-07-25 07:19
