skills.rest
mariusraileanu
mariusraileanuCOMMUNITY
Explore all skills by this author →
GitHub

prototype-webapp

Convert user ideas into spec-driven Next.js prototype web apps.

1|Updated Mar 6, 2026
Search Tags:#codex#nextjs#prototype#tailwind#design-system#ai-native#ux-spec
One-click install
npx skills add https://github.com/mariusraileanu/openclaw-hardened-azure --skill prototype-webapp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype-webapp
Source: https://github.com/mariusraileanu/openclaw-hardened-azure/tree/main/workspace/skills/prototype-webapp
Command: npx skills add https://github.com/mariusraileanu/openclaw-hardened-azure --skill prototype-webapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Replaces manual, fragmented prototyping processes with a single, spec-driven workflow that converts ideas into executable prototypes.

Core Features & Use Cases

  • Spec-first workflow that captures user ideas, defines UX requirements, and produces a UX_SPEC.md
  • Automates scaffold, design system setup, and Codex-driven implementation using a fixed Next.js + Tailwind + shadcn/ui stack
  • Supports Phase 1 idea refinement, Phase 2 UX specification generation, and Phase 3 Codex execution to deliver a working prototype

Quick Start

Prompt Codex to scaffold a new Next.js prototype web app using the defined UX_SPEC.

Frequently Asked Questions about prototype-webapp

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

FAQPage Schema
How do I turn an idea into a Next.js prototype automatically?▼

To turn ideas into Next.js prototypes, this Skill uses a spec-driven workflow that refines your prompt into a UX_SPEC and executes it via Codex. It outputs a working prototype into a defined workspace folder using local data.

What is a spec-driven workflow for AI-native prototype web apps?▼

A spec-driven workflow captures your idea, defines UX requirements into a UX_SPEC.md, and automates scaffold and implementation. It converts vague prompts into executable AI-native prototypes using a fixed Next.js, Tailwind, and shadcn/ui stack.

Does this prototype generator enforce a specific tech stack?▼

Yes, the prototype generator enforces a fixed tech stack consisting of Next.js, Tailwind, shadcn/ui, Lucide, and Framer Motion. It requires a YAML frontmatter with name and description to ensure consistent architecture across generated web apps.

Can I use Codex to scaffold a Next.js prototype from a UX specification?▼

Yes, you can prompt Codex to scaffold a new Next.js prototype web app using the generated UX_SPEC. The workflow progresses through idea refinement, UX specification generation, and Codex execution to deliver the working prototype.

What are the limitations of using a fixed tech stack for prototype generation?▼

The fixed Next.js, Tailwind, and shadcn/ui stack limits flexibility if your project requires different frameworks. It outputs exclusively into workspace/projects/<project-name> using local data, which restricts direct external database integration during the prototyping phase.

Do I need a UX_SPEC to generate a prototype web app?▼

You do not need an existing UX_SPEC because the workflow automatically generates one during Phase 2. You only need to provide a vague prompt or idea, which the system refines into the required UX specification before executing the Codex implementation.

Related Skills

Explore More Product & Management Skills→
highflame-aihighflame-ai
4

onboard

Analyze repository structures and dependency manifests to draft ai-factory configuration files and domain experts.

Official
Advanced
victorjoshi9victorjoshi9
1

build-mcpb

Package local MCP servers into installable .mcpb bundles.

Community
Advanced
magozmagoz
2

frontend-design

Design React interfaces with Tailwind v4 and shadcn/ui components.

Community
Intermediate
bingeli1379bingeli1379
2

esdd-init

Initialize Eureka SDD feature-spec scaffolding with a two-phase SCAN/BUILD workflow.

Community
Advanced