skills.rest
cna-bootcamp
cna-bootcampOFFICIAL
Explore all skills by this author →
GitHub

프로토타입 개발 가이드

Generates interactive HTML/JavaScript prototypes from UI/UX design specifications.

23|5|Updated Jul 17, 2025
Search Tags:#html#mobile-first#javascript#ui/ux#frontend development#prototype
One-click install
npx skills add https://github.com/cna-bootcamp/clauding-guide --skill -cna-bootcamp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 프로토타입 개발 가이드
Source: https://github.com/cna-bootcamp/clauding-guide/tree/main/.claude/skills/17-prototype-development
Command: npx skills add https://github.com/cna-bootcamp/clauding-guide --skill -cna-bootcamp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation of interactive prototypes from UI/UX designs, enabling faster user testing and feedback cycles before full development.

Core Features & Use Cases

  • Rapid Prototyping: Develop basic HTML/JavaScript prototypes based on provided UI/UX specifications.
  • Design System Adherence: Ensures consistency with style guides for colors, typography, and spacing.
  • Mobile-First Development: Prioritizes mobile layout and performance, scaling up for larger screens.
  • Use Case: After finalizing a mobile app's wireframes and style guide, use this Skill to quickly build a clickable prototype that stakeholders can interact with to validate the user flow and design.

Quick Start

Develop a prototype for the '05-홈.html' screen using the provided common.js and common.css files.

Frequently Asked Questions about 프로토타입 개발 가이드

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

FAQPage Schema
How do I build an interactive HTML prototype from UI/UX design specifications?▼

To build an interactive HTML prototype, provide your UI/UX specifications and style guides to generate mobile-first HTML and JavaScript with responsive design principles and SPA-like navigation simulation.

Can I simulate SPA-like navigation in a static HTML prototype?▼

Yes, you can simulate SPA-like navigation in an HTML prototype by utilizing the provided JavaScript components to handle view transitions and interactive user flows without a backend framework.

What is mobile-first development for interactive prototypes?▼

Mobile-first development for interactive prototypes prioritizes mobile layout and performance scaling, ensuring the HTML and JavaScript design system adheres to responsive principles before adapting to larger screens.

How do I validate user flows in a JavaScript prototype?▼

You validate user flows in a JavaScript prototype through browser-based execution and Playwright MCP checks, enabling iterative testing and feedback cycles before full development.

Do I need a complete style guide to generate an HTML prototype?▼

You need a style guide specifying colors, typography, and spacing to ensure design system adherence, allowing the generated HTML and JavaScript to maintain visual consistency across the prototype.

What's the best way to test a clickable HTML prototype for stakeholder feedback?▼

The best way to test a clickable HTML prototype is running it in a browser environment, utilizing Playwright MCP checks for validation, and iterating based on stakeholder interaction feedback.

Related Skills

Explore More Design & Creative Skills→
ouakarouakar

ui-designer

Define UI design systems and UX specifications bridging BRD and frontend implementation.

Community
Advanced
Svenja-devSvenja-dev
38

e2e-testing

Automate end-to-end browser testing for web applications with Playwright MCP.

Community
Intermediate
george-popescugeorge-popescu

frontend-standards

Define frontend development standards for component architecture, accessibility, and responsive design.

Community
Intermediate
sauvalasauvala

playground

Create single-file HTML playgrounds for interactive design and code experimentation.

Community
Intermediate