Agent skill

proposal-ui-mockup

View SKILL.md on GitHub Repository
Stars 2
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/ChinchillaEnterprises/ChillSkills/tree/main/proposal-ui-mockup

SKILL.md

Proposal UI Mockup Skill

Generate quick UI mockups for Upwork proposals using ClaudeCanvas. This runs automatically when jobs move to #upwork-pipeline, alongside the architecture diagram.

No Blender required. Uses HTML/CSS mockups with Puppeteer screenshots.

When to Invoke

This skill runs as part of the proposal workflow:

  1. Job identified in #upwork-jobs
  2. Draft proposal written
  3. Architecture diagram generated (existing)
  4. UI mockup generated (this skill)
  5. Both visuals + proposal sent to #upwork-pipeline

Core Approach

1. Analyze the Job

Before generating, determine:

  • Product type: Dashboard, calculator, form, widget, chat interface, admin panel, etc.
  • Industry: Healthcare, real estate, finance, e-commerce, etc.
  • Primary user: End customer, admin, internal team
  • Key features: What does the UI need to show?

2. Reference ChatGPT History

Search for similar past projects:

bash
grep -i "[project type]" /Users/tori/Documents/Repos/CHI/chatgpt-upwork-history.txt | head -50

Extract:

  • Successful proposal language
  • UI patterns that won similar jobs
  • Pricing context

3. Select Template Type

Job Type Template Key Elements
Data dashboard Dashboard Sidebar nav, metric cards, charts, tables
Pricing/Quote tool Calculator Input form, live preview, result summary
AI chatbot/agent Chat Interface Message thread, input bar, status indicators
Admin panel Admin Dashboard User table, filters, actions, stats
Form/Wizard Multi-step Form Progress bar, form sections, validation
API/Backend API Console Endpoint list, request builder, response viewer
E-commerce Product Interface Product display, cart, checkout flow

Chinchilla AI Brand Template

Colors (ALWAYS USE)

css
:root {
    --navy: #1B2D4F;
    --navy-light: #2A4170;
    --cream: #FDF8F3;
    --cream-dark: #F5EDE4;
    --warm: #E8DED3;
    --warm-dark: #D4C8BB;
    --terracotta: #C4785A;
    --terracotta-light: #D4927A;
    --sage: #7A9484;
    --sage-light: #9BB5A5;
    --text: #2C2C2C;
    --text-light: #6B6B6B;
}

Typography

  • Font: Plus Jakarta Sans
  • Import: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap

Design Tokens

  • Border radius: 8px (small), 12px (medium), 16px (large), 20px (cards)
  • Shadows: 0 4px 24px rgba(27, 45, 79, 0.08)
  • Transitions: all 0.3s ease

Template: Dashboard

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[Project Name] Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --navy: #1B2D4F;
            --navy-light: #2A4170;
            --cream: #FDF8F3;
            --cream-dark: #F5EDE4;
            --warm: #E8DED3;
            --warm-dark: #D4C8BB;
            --terracotta: #C4785A;
            --terracotta-light: #D4927A;
            --sage: #7A9484;
            --text: #2C2C2C;
            --text-light: #6B6B6B;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--cream);
            color: var(--text);
            min-height: 100vh;
            display: flex;
        }
        /* Sidebar */
        .sidebar {
            width: 260px;
            background: var(--navy);
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
        }
        .logo {
            color: var(--cream);
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 40px;
        }
        .logo span { color: var(--terracotta); }
        .nav-item {
            padding: 14px 16px;
            color: rgba(253, 248, 243, 0.7);
            font-size: 14px;
            font-weight: 500;
            border-radius: 10px;
            margin-bottom: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .nav-item:hover { background: rgba(255,255,255,0.1); color: var(--cream); }
        .nav-item.active { background: var(--terracotta); color: var(--cream); }
        /* Main content */
        .main {
            flex: 1;
            padding: 30px 40px;
            overflow-y: auto;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        .header h1 {
            font-size: 28px;
            font-weight: 700;
            color: var(--navy);
        }
        /* Metric cards */
        .metrics {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        .metric-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(27, 45, 79, 0.06);
        }
        .metric-label {
            font-size: 13px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        .metric-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--navy);
        }
        .metric-change {
            font-size: 13px;
            color: var(--sage);
            margin-top: 8px;
        }
        /* Content grid */
        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
        }
        .card {
            background: white;
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(27, 45, 79, 0.06);
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .card-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--navy);
        }
        /* Table */
        table { width: 100%; border-collapse: collapse; }
        th, td {
            text-align: left;
            padding: 14px 12px;
            font-size: 14px;
        }
        th {
            color: var(--text-light);
            font-weight: 600;
            border-bottom: 1px solid var(--warm);
        }
        td { border-bottom: 1px solid var(--cream-dark); }
        .status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        .status.active { background: rgba(122, 148, 132, 0.15); color: var(--sage); }
        .status.pending { background: rgba(196, 120, 90, 0.15); color: var(--terracotta); }
        /* Branding footer */
        .branding {
            position: fixed;
            bottom: 20px;
            right: 30px;
            font-size: 11px;
            color: var(--text-light);
        }
        .branding strong { color: var(--terracotta); }
    </style>
</head>
<body>
    <aside class="sidebar">
        <div class="logo">[Client<span>App</span>]</div>
        <div class="nav-item active">Dashboard</div>
        <div class="nav-item">Analytics</div>
        <div class="nav-item">Reports</div>
        <div class="nav-item">Settings</div>
    </aside>
    <main class="main">
        <div class="header">
            <h1>Dashboard</h1>
        </div>
        <div class="metrics">
            <div class="metric-card">
                <div class="metric-label">Total Users</div>
                <div class="metric-value">12,847</div>
                <div class="metric-change">↑ 12% from last month</div>
            </div>
            <div class="metric-card">
                <div class="metric-label">Revenue</div>
                <div class="metric-value">$48.2K</div>
                <div class="metric-change">↑ 8% from last month</div>
            </div>
            <div class="metric-card">
                <div class="metric-label">Active Sessions</div>
                <div class="metric-value">1,429</div>
                <div class="metric-change">Live now</div>
            </div>
            <div class="metric-card">
                <div class="metric-label">Conversion</div>
                <div class="metric-value">3.2%</div>
                <div class="metric-change">↑ 0.4% from last month</div>
            </div>
        </div>
        <div class="content-grid">
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Recent Activity</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Action</th>
                            <th>Status</th>
                            <th>Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John Smith</td>
                            <td>Completed onboarding</td>
                            <td><span class="status active">Active</span></td>
                            <td>2 min ago</td>
                        </tr>
                        <tr>
                            <td>Sarah Johnson</td>
                            <td>Submitted form</td>
                            <td><span class="status pending">Pending</span></td>
                            <td>15 min ago</td>
                        </tr>
                        <tr>
                            <td>Mike Davis</td>
                            <td>Upgraded plan</td>
                            <td><span class="status active">Active</span></td>
                            <td>1 hour ago</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Quick Stats</span>
                </div>
                <!-- Additional content -->
            </div>
        </div>
    </main>
    <div class="branding">Concept by <strong>Chinchilla AI</strong></div>
</body>
</html>

Template: Calculator/Pricing Widget

html
<!-- Similar structure with:
- Two-column layout: inputs left, summary right
- Form inputs with labels
- Live calculation display
- CTA button
- Embedded in mock client website context
-->

Template: Chat/AI Interface

html
<!-- Similar structure with:
- Message thread area
- AI vs User message styling
- Input bar with send button
- Status indicators
- Typing animation
-->

Generation Workflow

Step 1: Create HTML

Based on job analysis, use appropriate template and customize:

  • Replace [Client App] with project-relevant name
  • Adjust metrics/data to match industry
  • Customize navigation items
  • Update table content to reflect use case

Step 2: Screenshot with Puppeteer

bash
cd /Users/tori/Documents/Repos/CHI/automations
node -e "
const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch({
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        headless: 'new',
        args: ['--no-sandbox']
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 1440, height: 900, deviceScaleFactor: 2 });
    await page.goto('file:///Users/tori/Documents/Repos/CHI/automations/output/[MOCKUP].html');
    await page.waitForTimeout(500);
    await page.screenshot({ path: 'output/[MOCKUP].png' });
    await browser.close();
    console.log('Screenshot saved');
})();
"

Step 3: Upload to Slack

bash
cd /Users/tori/Documents/Repos/CHI/automations/scripts
node slack-upload.js ../output/[MOCKUP].png C09BDVBD1EY --title "[Project] UI Mockup" --comment "Frontend concept showing what the finished product could look like"

Channel IDs:

  • #upwork-pipeline: C09BDVBD1EY
  • #upwork-jobs: C09BNP18741
  • #general: C072D98C41X

Output Location

All outputs: /Users/tori/Documents/Repos/CHI/automations/output/

Naming convention:

  • Proposal-[JobTitle]-UI.html - Mockup source
  • Proposal-[JobTitle]-UI.png - Screenshot for Slack
  • Proposal-[JobTitle]-Architecture.png - Backend diagram (existing workflow)

Integration with Proposal Workflow

When drafting a proposal for #upwork-pipeline:

  1. Analyze job - Determine product type, industry, key features
  2. Search ChatGPT history - Find similar past proposals
  3. Generate architecture diagram - (existing workflow)
  4. Generate UI mockup - (this skill)
  5. Upload both to Slack - Architecture + UI mockup
  6. Post proposal text - Draft application

The UI mockup shows clients: "We understand what you're building, and here's what it could look like."

Quality Checklist

Before uploading mockup:

  • Uses Chinchilla AI brand colors (cream, navy, terracotta, sage)
  • Plus Jakarta Sans font loaded
  • Relevant to the actual job (not generic)
  • Data/content reflects the industry
  • "Concept by Chinchilla AI" branding present
  • Clean, professional, not cluttered
  • Screenshot is sharp (2x deviceScaleFactor)

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

ChinchillaEnterprises/ChillSkills

Red Team

Use this skill when the user says "red team", "stress test", "attack this", "critique this", "run the models against this", "test this plan", "refine this with AI", or wants to use external AI models to critique, validate, or improve a document, pitch, plan, or idea. Also use when the user wants to save Claude Code usage by offloading analysis to other models.

2 0
Explore
ChinchillaEnterprises/ChillSkills

Upwork Scanner

This skill should be used when the user asks to "scan upwork", "find upwork jobs", "check upwork", "run the scanner", "look for jobs", or mentions finding freelance projects for Chinchilla AI.

2 0
Explore
ChinchillaEnterprises/ChillSkills

Polymarket Arb Scanner

This skill should be used when the user asks to "scan polymarket", "find arb opportunities", "check polymarket arbs", "run arb scanner", "polymarket arbitrage", or mentions detecting price inefficiencies on Polymarket.

2 0
Explore
ChinchillaEnterprises/ChillSkills

captain-update

2 0
Explore
ChinchillaEnterprises/ChillSkills

Polymarket Copy Trader

This skill should be used when the user asks to "copy trade", "telegram bot polymarket", "follow traders", "copy polymarket", or mentions building a copy trading bot for Polymarket.

2 0
Explore
ChinchillaEnterprises/ChillSkills

Architecture Diagram

This skill should be used when the user asks to "generate a diagram", "create an architecture diagram", "make a diagram", "draw a system diagram", or needs a branded Chinchilla AI technical diagram for proposals or documentation.

2 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results