菜单
Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications with React-based frameworks. Includes Tailwind CSS v4, shadcn/ui components, Motion animations, and visual design philosophy for avoiding generic AI aesthetics.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications with React-based frameworks. Includes Tailwind CSS v4, shadcn/ui components, Motion animations, and visual design philosophy for avoiding generic AI aesthetics. |
Create distinctive, production-grade interfaces avoiding generic "AI slop" aesthetics.
./references/tailwind/v4-config.md - Installation, @theme, CSS-first config./references/tailwind/v4-features.md - Container queries, gradients, masks, text shadows./references/tailwind/utilities-layout.md - Display, flex, grid, position./references/tailwind/utilities-styling.md - Spacing, typography, colors, borders./references/tailwind/responsive.md - Breakpoints, mobile-first, container queriesSearch: @theme, @container, OKLCH, mask-, text-shadow
./references/shadcn/setup.md - Installation, visual styles, component list./references/shadcn/core-components.md - Button, Card, Dialog, Select, Tabs, Toast./references/shadcn/form-components.md - Form, Field, Input Group, 2026 components./references/shadcn/theming.md - CSS variables, OKLCH, dark mode./references/shadcn/accessibility.md - ARIA, keyboard, screen readerSearch: Field, InputGroup, Spinner, ButtonGroup, next-themes
./references/animation/motion-core.md - Core API, variants, gestures, layout animations./references/animation/motion-advanced.md - AnimatePresence, scroll, orchestration, TypeScriptStack:
| Animation Type | Tool |
|---|---|
| Hover/transitions | Tailwind CSS (transition-*) |
| shadcn states | tailwindcss-animate (built-in) |
| Gestures/layout/exit | Motion (motion/react) |
| Complex SVG morphing | anime.js v4 (niche only) |
./references/canvas/philosophy.md - Design movements, core principles./references/canvas/execution.md - Multi-page systems, quality standardsFor sophisticated compositions: posters, brand materials, design systems.
Before coding, commit to BOLD aesthetic direction:
Bold maximalism and refined minimalism both work. Key is intentionality.
@theme for spacing, colors, typographyTailwind v4.1: CSS-first config via @theme. Single @import "tailwindcss". OKLCH colors. Container queries built-in.
shadcn/ui v3.6: Copy-paste Radix components. Visual styles: Vega/Nova/Maia/Lyra/Mira. New: Field, InputGroup, Spinner, ButtonGroup.
Motion: import { motion, AnimatePresence } from 'motion/react'. Declarative React animations. Use tailwindcss-animate for shadcn states.
Choose beautiful, unique fonts. Pair distinctive display with refined body:
@theme {
--font-display: "Playfair Display", serif;
--font-body: "Source Sans 3", sans-serif;
}
Use OKLCH for vivid colors. Dominant colors with sharp accents:
@theme {
--color-primary-500: oklch(0.55 0.22 264);
--color-accent: oklch(0.75 0.18 45);
}
Primary: Motion for React animations. Fallback: CSS @starting-style for simple enter/exit.
import { motion, AnimatePresence } from 'motion/react';
// Basic animation
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
// Exit animations
<AnimatePresence>
{show && <motion.div exit={{ opacity: 0 }} />}
</AnimatePresence>
// Layout animations
<motion.div layout />
// Gestures
<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />
CSS fallback (no JS):
dialog[open] {
opacity: 1;
@starting-style { opacity: 0; transform: scale(0.95); }
}
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Create atmosphere: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or where to take the project next (roadmap, product direction), or generate handoff plans for another agent to implement.
Create a custom skill for this project. Determines skill type, writes SKILL.md (and optional references/scripts) to .opencode/skills/<name>/, commits and pushes. Load FIRST before writing any skill.
Import a bitmap image (PNG/JPEG/GIF) from a URL into a Figma file as a frame. Use whenever an image needs to land in Figma — AI mockups, photos, renders, artwork, screenshots. Bypasses use_figma sandbox limits that block the obvious paths (fetch, atob, createImageAsync, REST upload). If you skip this skill and try the obvious paths, you will lose 30+ minutes. Triggers on: import image to Figma, add image to Figma, put image in Figma, Figma image import, bitmap to Figma.
Generate images, videos, and music using AI models (Imagen, Flux, Veo, Runway, Kling, Sora, Suno, ElevenLabs, etc.). Use when user asks to create, generate, edit, upscale, or produce any visual or audio media.
Install a skill from a GitHub URL or local path. Copies SKILL.md (and references/scripts) into the project's .opencode/skills/ directory and creates the companion command. Use when user wants to add an existing skill to their project.
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.js files.