Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    design blueprint

    1

    Transforms project ideas into frontend-ready design systems with brand assets, user flows, and HTML/CSS mockups.

    $7

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    design blueprint

    design blueprint

    Example session with this skill installed

    I'm building a minimal, serious fintech dashboard for tracking carbon credits. We need to figure out the branding and the main overview screen. Use the design blueprint process.

    • Read your context and instructions
    • Compiled the design blueprint
    • Generated the app files

    I have completed the Brand Direction and Initial Mockup phase for your Carbon Credit Dashboard. The design focuses on "Environmental Authority" using a high-contrast, data-dense layout.

    Brand Direction & Tokens

    The palette uses Forest Deep as the primary brand color with Metric Green for positive trends. Typography relies on a highly legible sans-serif stack for data density.

    :root {
  /* Colors */
  --color-primary: #1A2F23;
  --color-accent: #2ECC71;
  --color-bg: #F9FBFA;
  --color-text: #121A16;
  --color-error: #E74C3C;

  /* Spacing & Scale */
  --space-unit: 4px;
  --font-size-h1: 2.25rem;
  --font-size-body: 1rem;
  --radius-sm: 4px;
}

    Overview Screen Mockup

    I have generated mockups/dashboard-overview.html. Key features:

    • Balance Card: Clear focal point showing total credits with a 24h trend indicator.
    • Credit Ledger: Compact table layout with status badges (Pending, Retired, Active).
    • Navigation: Sidebar-heavy layout for desktop-first data management.

    User Flow: Retirement Process

    graph TD
    A[Dashboard] --> B[Select Credits]
    B --> C{Verify Amount}
    C -->|Valid| D[Confirm Retirement]
    C -->|Invalid| E[Error: Insufficient Funds]
    D --> F[Success State & Certificate View]

    Next steps

    1. Review the mockups/dashboard-overview.html in your browser to verify the layout density.
    2. Confirm if we should proceed to Phase 4 to generate the full JSON design tokens for your React/Tailwind config.
    3. Decide if you need specific mobile breakpoints mocked up for the ledger view.

    dashboard-overview.html

    ZIP · project files

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Bridge the gap between a vague app idea and a frontend-ready implementation. This skill stops you from guessing at hex codes and layout structures by forcing a structured design process before a single line of application code is written. It delivers a comprehensive design system including visual identity, user flows, and functional HTML/CSS mockups.

    What it does

    • Brand Identity Creation: Defines color palettes with accessibility checks, typography scales, and voice/tone guidelines.
    • User Flow Mapping: Generates Mermaid flowcharts and written walkthroughs for core user journeys and edge cases.
    • Functional Mockups: Builds standalone HTML/CSS files for key screens using real design tokens rather than placeholders.
    • Component Specification: Documents variants, states, and behavior rules for every UI element used in the designs.
    • Design Token Export: Produces CSS custom properties and JSON files for direct injection into your frontend build.

    How it works

    1. Interactive Discovery: The agent asks targeted, one-at-a-time questions to establish audience, personality, and platform constraints.
    2. Research and Brand Prep: It synthesizes answers into a visual direction document covering everything from grid systems to iconography.
    3. Flow and Screen Design: It maps the logic and builds the actual UI, ensuring high visual hierarchy and state coverage (hover, focus, error).
    4. Handoff Generation: It outputs a technical spec of tokens and components ready for development.

    Frameworks & tools

    Output is framework-agnostic, delivering standard HTML5, CSS3 (with custom properties), JSON tokens, and Mermaid.js diagrams.

    Why this beats prompting it yourself

    Standard prompts often produce generic, "AI-looking" designs with unearned gradients and "lorem ipsum" text. This skill enforces a four-phase discipline that ensures accessibility compliance, logical user flows, and production-ready CSS tokens that actually match the brand personality.

    Use cases

    • Defining the visual identity and UI for a new MVP from a rough pitch.
    • Mapping complex user onboarding or checkout flows before backend development.
    • Generating a consistent design system for a solo developer project.
    • Creating high-fidelity, interactive prototypes to validate features with users.

    Known limitations

    This skill focuses on system design and mockups. It does not generate production application logic, database schemas, or backend implementation plans.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 2 days ago

    • Passed all security checks, Safe to install

    Listed2 days ago

    What's inside

    Frequently Asked Questions