Design Systems
Design skill, available on Zeplik
Design Systems is a ready-to-run design skill on Zeplik. Building design systems — component libraries, design tokens, theming, and starter scaffolds for a consistent UI foundation. Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer.
The Design Systems skill loads automatically when your request matches it, or you can invoke it directly by typing /design-systems in any chat. It works with attachments, connectors, and any model that supports the task, so you get the same expert method every time without setting anything up.
What the Design Systems skill can do
- Structure component libraries with consistent architecture patterns
- Define design token schemes for color, spacing, and typography
- Build theming systems that support multiple brands or modes
- Scaffold starter design system projects with rationale and docs
Try these prompts on Zeplik
Pick a prompt to open it in the Zeplik app. If you are not signed in yet, your prompt is waiting for you the moment you do.
How the Design Systems skill works
/design-systems
Umbrella for building design systems. The user wants a consistent UI foundation; establish the framework and scope, then deliver component structure, token schemes, theming, and scaffolds with a rationale. For visual/brand critique of a single screen route to the other design skills.
Dispatch table
Pick the reference file(s) that match the request, read them, then answer. Read at most 2-3 files per turn.
| Topic | Read |
|---|---|
| Core component library and design system patterns. | references/core-components.md |
| Create and evolve design systems with design tokens, component architecture, accessibil… | references/design-system-starter.md |
How to work
- Identify which leaf topic the request maps to from the dispatch table above; establish the concrete inputs (language, dataset, framework, file format) and the goal. Ask for a missing detail rather than guessing.
- Read the matching reference file(s) before answering. Read at most 2-3 per turn.
- Deliver runnable artifacts — code, configs, specs — with a short rationale, matching the user's existing conventions when they paste code.
- Confirm any decision the source flags (versions, thresholds, tradeoffs) with the user instead of guessing.
Usage
/design-systems $ARGUMENTS
How to use the Design Systems skill
Sign in to Zeplik
Create a free Zeplik account or sign in. New accounts start with free credits, so you can try the Design Systems skill right away.
Describe your design task
Ask in plain language, or type /design-systems to invoke the skill directly. Zeplik recognizes the Design Systems skill and applies its method.
Review and refine the result
Zeplik returns a clear, structured answer. Ask follow-ups in the same chat to refine it or take the next step.
Source and credit
- Author
- davila7 (D7 umbrella-consolidation)
- License
- MIT
Adapted from the open-source davila7/claude-code-templates project and tuned to run natively on Zeplik. View source on GitHub.
Frequently asked questions
- What is the Design Systems skill?
- Design Systems is a ready-to-run design skill on Zeplik. Building design systems — component libraries, design tokens, theming, and starter scaffolds for a consistent UI foundation. Ask in plain language and Zeplik applies the skill's method for you inside the conversation, on whichever AI model you prefer.
- How do I use Design Systems on Zeplik?
- Sign in to Zeplik and ask in plain language, or type /design-systems in any chat to invoke it directly. The skill applies its method and returns a result you can refine in the same conversation.
- Which AI model does the Design Systems skill use?
- Any model you choose. Zeplik works across every model in one chat, so the Design Systems skill runs on your preferred model for the task.
- Where does the Design Systems skill come from?
- The Design Systems skill is adapted from the open-source davila7/claude-code-templates project (MIT) and tuned to run natively on Zeplik. The original source is linked on this page.
- How much does the Design Systems skill cost?
- Using the skill is free to start. You only spend Zeplik credits when the assistant runs, and new accounts begin with free credits.
Related design skills
- Accessibility ReviewUse when the user asks to audit a design or page for accessibility — "check a11y", "is this accessible?", "run a WCAG audit" — covering color contrast, keyboard navigation, focus order, touch target size, and screen reader behavior against WCAG 2.1 AA before handoff.
- Brand Guidelines BuilderUse when the user wants Anthropic's official brand look-and-feel applied to an artifact — brand colors, typography, visual formatting, company design standards. Trigger: "use Anthropic branding", "apply our brand style". Visual identity only; not for brand voice or tone in writing (use brand-voice-enforcement).
- Brand Landing PageRuns a brand interview with no established visual direction, then generates deployment-ready landing-page HTML. Not for dashboards or app UI (use frontend-design).
- Design CritiqueUse when the user shares a design, mockup, screenshot, or Figma link and asks for feedback — "review this design", "critique this mockup", "what do you think of this screen?". Gives structured feedback on usability, hierarchy, and consistency. Not for a WCAG audit (use accessibility-review).
- Design Delivery NavigatorUse to chain UI delivery across skills -- research, design, systemize, accessibility, handoff. Not for a single critique (use design-critique).
- Design Handoff PackageUse when a design is ready for engineering and the user wants a developer handoff spec — layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, animation details. Trigger: "write the handoff spec", "prep this design for devs", "spec this screen out".
More on Zeplik
Try Design Systems on Zeplik
Every model, one chat. Bring the Design Systems skill into your next conversation and let the assistant do the work.