skills.rest
getfndd
getfnddCOMMUNITY
Explore all skills by this author →
GitHub

prototype

Generate design-system-aware HTML prototypes with configurable fidelity and chrome options.

Updated Feb 21, 2026
Search Tags:#html#frontend#design system#prototype#fidelity#ui generation
One-click install
npx skills add https://github.com/getfndd/animatic --skill prototype-getfndd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/getfndd/animatic/tree/main/.claude/skills/prototype
Command: npx skills add https://github.com/getfndd/animatic --skill prototype-getfndd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of HTML prototypes, ensuring they adhere to design system standards and can be quickly iterated upon.

Core Features & Use Cases

  • Design System Compliance: Automatically applies ITO design system tokens, presets, and patterns.
  • Fidelity Control: Supports 'sketch', 'concept', and 'spec' fidelity levels for different stages of design.
  • Chrome Options: Includes various app shell templates ('none', 'minimal', 'sidebar', 'full') for context.
  • Use Case: Quickly generate a 'spec' fidelity prototype for a new user settings page, complete with all design system components and interactive states, ready for developer handoff.

Quick Start

Use the prototype skill to generate a concept-fidelity login form with a minimal chrome.

Frequently Asked Questions about prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an HTML prototype that automatically follows a design system?▼

To generate an HTML prototype that follows a design system, use this Skill to automatically apply ITO design system tokens, presets, and patterns directly into the HTML output, ensuring strict compliance without manual styling.

What is the difference between sketch, concept, and spec fidelity levels in UI generation?▼

Fidelity levels in UI generation control the detail of the HTML prototype: 'sketch' for low-fidelity layouts, 'concept' for mid-fidelity designs, and 'spec' for high-fidelity prototypes with interactive states ready for developer handoff.

Can I add an app shell or sidebar chrome to my HTML prototype?▼

Yes, you can add app shell chrome to your HTML prototype by selecting from 'none', 'minimal', 'sidebar', or 'full' chrome templates, which provide contextual rendering around your generated UI components.

What's the best way to create a high-fidelity UI prototype for developer handoff?▼

The best way to create a high-fidelity UI prototype for developer handoff is to generate a 'spec' fidelity HTML prototype, complete with design system components and interactive states.

Does this HTML prototype generator work without external frontend dependencies?▼

Yes, this HTML prototype generator operates without external dependencies, using internal scripts and references to enforce design system tokens and generate standalone UI prototypes.

Why should I use design system tokens when creating frontend prototypes?▼

Using design system tokens when creating frontend prototypes ensures visual consistency, streamlines iteration, and automatically applies predefined ITO patterns and presets to the generated HTML output.

Related Skills

Explore More Design & Creative Skills→
somachaksomachak

modern-css-architecture

Standardize design tokens and component styling patterns for Tailwind-based React projects.

Community
Intermediate
lucaspedrozaemlucaspedrozaem
1

prototype

Create clickable wireframe prototypes to validate SaaS feature concepts.

Community
Intermediate
crgarcia12crgarcia12

ui-ux-design

Generate interactive HTML/CSS/JS wireframe prototypes from approved FRDs.

Community
Advanced
ldzhhxxldzhhxx
1

claude-design

Design custom HTML artifacts for landing pages, prototypes, and presentations.

Community
Advanced