| name | backy-frontend-desing-design-system |
| description | Backy frontend design design-system super-skill. Use for UI/UX taste, visual systems, critique, platform rules, Figma handoff, copy, conversion, and product design direction. Routes across 36 Open Design design-system capabilities without installing them as 36 separate top-level skills. |
Backy Frontend Desing: Design System
Use this when the user asks for UI/UX taste, visual systems, critique, platform rules, Figma handoff, copy, conversion, and product design direction.
This is a compact router over 36 Open Design design-system capabilities. Keep the top-level context small: start with the catalog, then load only the exact source reference files needed for the request.
Workflow
- Read
references/catalog.md to pick one primary capability and, if useful, one support capability.
- Read only the matching file(s) from
references/source/. Do not bulk-load every source file.
- Apply the source skill's constraints, but keep the repo's existing architecture and design system unless the user explicitly asks for a new direction.
- For UI work, verify real rendered output when a local app or HTML artifact exists. Use screenshots or browser checks for responsive and visual claims.
- If the requested work crosses modes, combine this with the relevant sibling skill, for example
backy-frontend-desing-design-system plus backy-frontend-desing-prototype.
Capability Map
ad-creative -> references/source/ad-creative.mdapple-hig -> references/source/apple-hig.mdbrainstorming -> references/source/brainstorming.mdbrand-guidelines -> references/source/brand-guidelines.mdcolor-expert -> references/source/color-expert.mdcompetitive-ads-extractor -> references/source/competitive-ads-extractor.mdcopywriting -> references/source/copywriting.mdcreative-director -> references/source/creative-director.mddesign-brief -> references/source/design-brief.mddesign-consultation -> references/source/design-consultation.mddesign-md -> references/source/design-md.mddesign-review -> references/source/design-review.mddomain-name-brainstormer -> references/source/domain-name-brainstormer.mdenhance-prompt -> references/source/enhance-prompt.mdfigma-code-connect-components -> references/source/figma-code-connect-components.mdfigma-create-design-system-rules -> references/source/figma-create-design-system-rules.mdfigma-create-new-file -> references/source/figma-create-new-file.mdfigma-generate-design -> references/source/figma-generate-design.mdfigma-generate-library -> references/source/figma-generate-library.mdfigma-implement-design -> references/source/figma-implement-design.mdfigma-use -> references/source/figma-use.mdfrontend-design -> references/source/frontend-design.mdfrontend-skill -> references/source/frontend-skill.mdmarketing-psychology -> references/source/marketing-psychology.mdpaywall-upgrade-cro -> references/source/paywall-upgrade-cro.mdplan-design-review -> references/source/plan-design-review.mdplatform-design -> references/source/platform-design.mdshadcn-ui -> references/source/shadcn-ui.mdstitch-loop -> references/source/stitch-loop.mdswiftui-design -> references/source/swiftui-design.mdtaste-skill -> references/source/taste-skill.mdtheme-factory -> references/source/theme-factory.mdui-skills -> references/source/ui-skills.mdui-ux-pro-max -> references/source/ui-ux-pro-max.mdweb-design-guidelines -> references/source/web-design-guidelines.mdwpds -> references/source/wpds.md
Backy Defaults
- Prefer distinctive, production-grade UI over generic AI template structure.
- Use real content and data from the user or project. Do not invent metrics, logos, testimonials, or product claims.
- Keep typography, spacing, interaction states, and responsive behavior as first-class acceptance criteria.
- When source skills conflict, choose the stricter visual QA rule and the simpler implementation.
- For existing products, improve the current surface instead of replacing product structure wholesale.
