| name | firefly-ai-design |
| description | Use this skill to generate well-branded interfaces and assets for 萤火虫AI (Firefly AI, formerly 灵创/Lyncra), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. |
| user-invocable | true |
Read the README.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
Quick reference
- Brand: 萤火虫AI (Firefly AI) — AI 多模态内容创作平台。Signature = firefly-glow lime
#CFEF00 + ink black, generous rounding, clean card grids (d.design) + airy bold type (Anima).
- Tokens:
colors_and_type.css — colors, type, radius, shadow, spacing CSS vars + semantic classes. Load first.
- Fonts: Space Grotesk (display) · Plus Jakarta Sans (UI/body) · PingFang SC (CJK) · Space Mono. Loaded via Google Fonts CDN in the token file.
- Assets:
assets/logo-firefly.svg (mark), assets/logo-lockup.svg / -dark.svg, assets/legacy/ (original product icons archive).
- Icons: custom line-SVG icons rendered via CSS mask + currentColor — nav icons in
ui_kits/app/assets/nav/, node-library icons in assets/rail/. The animated firefly mark lives at ui_kits/app/assets/logo-loop.html. (Original product used Ant Design Icons.)
- UI Kit:
ui_kits/app/ — 创作工作台: 80px nav rail + Home (animated hero / frosted composer / quick-entry cards / masonry / template detail) + Agent chat (collapsible dir + Skill chips) + Canvas (project gallery → node workflow editor with pan/zoom/minimap/drag-connect) + Assets + Production board. Entry index.html; standalone preview app-preview.html.
- Design system cards:
preview/ — color, type, spacing, component, brand specimens.
Golden rules
- Lime
#CFEF00 is for accents only (CTAs, active, focus, highlights) and only ever carries ink-black text, never white.
- Radii follow a regular 4px-step scale (xs 4 / sm 8 / md 12 / lg 16 / xl 20 / 2xl 24 / 3xl 32 / full) — cards lg(16px), panels/composer xl(20px), buttons full pill.
- Copy is Chinese-first, uses 你 (not 您), encouraging, action-led short button labels (制作同款), almost no emoji.
- Don't invent imagery — use tonal placeholder blocks with a disclaimer, or ask for real assets.
