Design Templates

SkillMedia

Guides your agent through the design Claude skill for finding, saving, copying, and adapting design templates.

Available today. Use it from your connected AI after setup.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the Design Templates skill

About this skill

Find, save, copy, and adapt Design templates. Use when the user references a template, a prior design, or wants a reusable starting point.

What this skill tells your AI

The instructions your AI receives, as published by builderio/agent-native in templates/design/.agents/skills/design-templates/SKILL.md and read by ahel’s review.

Prerequisites

  • Read navigation or call view-screen when the current template or design is unclear.
  • Treat built-in and user-created entries as one template concept. Their ownership and available share/delete actions differ, but creation uses the same action.

Workflow

  1. Resolve the starting point. When the user mentions a template, past design, or prior work, call both list-design-templates and list-designs before generating. Match the requested name or id; ask only when multiple plausible results remain.
  2. Save a reusable template. Call save-design-as-template with the source designId. The action snapshots inline screens, canvas dimensions, defaults, linked design system, and locked layers.
  3. Create from a template. Call create-design-from-template with the resolved templateId. Pass designSystemId only when the user selected an override; the action access-checks it and returns the effective linked id.
  4. Stop after a pure copy. If there is no prompt and no pending design-system adaptation, open the copied design and do not start generation.
  5. Adapt copied screens. When the user supplied a prompt or chose a different accessible design system, call get-design-snapshot exactly once, then refine the existing unlocked content with edit-design. Never call generate-design, delete the copied screens, or recreate the template from scratch.
  6. Verify. Read back the copied design and confirm its screens, canvas dimensions, linked design system, and locked-layer boundaries before reporting completion.

The Template On Follow-Up Requests

A copied screen is edited in place. After the first refinement saves, the design's own files are the result, not the template — so a later turn that reads only get-design-snapshot has no idea what the template specified, and fonts and artboard dimensions drift a little further on each request.

The two facts that drift are cheap, so they arrive on their own. view-screen reports design.createdFromTemplate on every turn for a template-created design, carrying lockedDimensions per screen and lockedFonts. Both are captured from the template at copy time, so they describe the template even after the design has been edited many times. Honour them in every edit-design pass: never resize the artboard, change a canvasFrames width or height, switch the primary viewport, or substitute a typeface to fit new content.

Call get-design-template --designId="<id>" when you need more than those two facts — the template's original markup, or its locked layers — for example before a structural edit or when the user asks how far the design has moved from its template. The full template files are large, which is why they are a deliberate second call rather than part of every turn.

Locked Layers

data-agent-native-locked="true" is authoritative. Keep each locked element and all descendants byte-for-byte unchanged during adaptation. If the user explicitly wants one changed, ask them to unlock it in the Layers panel first.

Ownership

  • Built-in templates cannot be renamed, shared, or deleted.
  • Owned user templates may be shared with the standard resource sharing UI and deleted with delete-design-template.
  • Do not model templates as ordinary designs rows and do not invent alternate template action names.

Related Skills

  • design-generation — creating and refining Design screens.
  • design-systems — applying linked systems and tokens.
  • sharing — access and sharing rules for user-created templates.

Signals

GitHub stars
7k
Forks
613
Last commit
Sep 2026
Advanced
Item type
skill
Key
design-templates
Source
github.com/builderio/agent-native