Monica Ui Design

Monica UI Design Prototyping

Create interactive HTML prototypes with bold, distinctive aesthetics to visualize UI designs before MudBlazor implementation.

CRITICAL: Design-Only Session Rule

When this skill is active, the session is in design mode. Focus exclusively on UI design and prototyping:

• Do NOT write any Blazor/C#/MudBlazor implementation code
• Do NOT create .razor, .razor.cs, .razor.css, or any .cs files
• Do NOT discuss implementation details, service layers, or backend concerns
• Only produce design artifacts inside .ui-design/{feature-name}/, such as design.md, index.html, optional prototype CSS/JS/data files, and design-related conversation
• If the user asks to start coding, remind them to begin a new session with /monica-ui-development

Design first, code later.

Workflow

| Phase | Action | Output | |-------|--------|--------| | 1. Discover | Gather requirements and commit to an aesthetic direction | Understanding + Design Thinking | | 2. Design | Break UI into modules, plan layout and interactions | design.md | | 3. Prototype | Build interactive HTML prototype with distinctive aesthetics | index.html + optional prototype support files | | 4. Iterate | Refine based on user feedback | Updated files |

Phase 1: Discovery and Design Thinking

Requirements Gathering

Ask 2-3 focused questions per round:

1. Feature name — Used for folder naming (kebab-case)
2. Purpose — What does this UI do? Who uses it?
3. Key interactions — CRUD, monitoring, configuration, chat, dashboard, etc.
4. Layout needs — Sidebar? Tabs? Data grids? Dialogs? Tree views?
5. Reference pages — Any existing Monica pages to draw inspiration from?

Keep it conversational. Do not ask all questions at once.

Design Thinking

Before any design work, commit to a bold aesthetic direction by answering:

| Dimension | Question | |-----------|----------| | Purpose | What problem does this interface solve? Who uses it? | | Aesthetic Direction | Pick a bold tone: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, or something entirely unique | | Signature Detail | What makes this design UNFORGETTABLE? The one thing someone will remember | | Constraints | Technical requirements (framework, performance, accessibility) |

Present the aesthetic direction to the user for confirmation before proceeding. The key is intentionality — bold maximalism and refined minimalism both work when executed with precision.

Phase 2: Design Document

Folder Setup

1. Create .ui-design/ at project root if it does not exist
2. Create .ui-design/{feature-name}/ (kebab-case)
3. Create design.md using the template from references/design-template.md

Content Requirements

The design.md must contain:

• Design Thinking table (aesthetic direction, typography, color, signature detail)
• Feature overview and goals
• Module/section breakdown with visual hierarchy
• Motion and animation plan
• Key interaction flows
• Responsive behavior notes

Phase 3: Interactive Prototype

Output Structure

Default to a single entry page, but do not force everything into one file when the prototype is large.

Small / Medium Prototype

.ui-design/{feature-name}/
├── design.md      # Design document
└── index.html     # Interactive prototype

Complex Prototype

When the prototype has many views, large mock data, or substantial interaction logic, use a small static file structure instead:

.ui-design/{feature-name}/
├── design.md          # Design document
├── index.html         # Prototype entry point
├── styles.css         # Optional shared styling
├── app.js             # Optional interaction logic
├── data.js            # Optional mock data / view models
├── components/        # Optional view fragments or component renderers
└── assets/            # Optional images, icons, sample media

Rules:

• index.html must remain the main entry point
• Keep the prototype static and browser-runnable without a build step
• Prefer simple ` and ` references over bundlers
• Keep design artifacts self-contained under .ui-design/{feature-name}/

Complexity Threshold

Use single-file only when most of these are true:

• One primary page/view
• Up to 3 major interaction zones
• Limited mock data
• Minimal state management
• Total file remains easy to review

Switch to multi-file prototype structure when any of these become true:

• Multiple screens, panels, dialogs, or navigation states
• Large mock datasets or deeply nested example content
• More than one substantial interaction system (tree, modal, filters, drag states, chart states, etc.)
• Inline script/style blocks become hard to scan
• index.html would become too large to comfortably maintain

If splitting files, note the file map briefly in design.md.

Aesthetic Execution Rules

Every prototype must be visually distinctive. Consult references/aesthetics-guidelines.md for detailed guidance on:

• Typography: Choose unique, characterful fonts. Never default to Arial, Inter, Roboto, or system fonts. Pair a distinctive display font with a refined body font. Load from Google Fonts CDN.
• Color: Commit to a cohesive palette matching the aesthetic direction. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
• Motion: Focus on high-impact moments — one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions. Add surprising hover states and smooth transitions.
• Spatial Composition: Break free from predictable grids. Use asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space or controlled density.
• Atmosphere: Create depth with gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom scrollbars.

No two designs should look the same. Vary themes, fonts, and aesthetics across projects.

Prototype Technical Rules

Build an interactive prototype whose entry point is index.html:

1. Uses Tailwind CSS via CDN with custom config extending colors and fonts to match the chosen aesthetic direction

1. Is fully interactive — Tabs switch content, dialogs open/close, navigation highlights, forms accept input. For small prototypes, inline JS is fine. For complex prototypes, move logic into app.js and keep index.html readable.

1. Is responsive — Use Tailwind breakpoints (sm:, md:, lg:, xl:).

1. Includes meaningful animations — Page load reveals, hover effects, transitions matching the aesthetic direction. CSS-only preferred.

1. Uses realistic placeholder data — Show the real structure, sections, and interaction flow with data that feels authentic. If mock data becomes large, move it into data.js.

1. Uses Lucide icons (optional) for iconography:

lucide.createIcons();

Maintainability Rules

• Optimize for readability of the prototype source, not just speed of generation
• Avoid 1000+ line index.html files when a small split would make the prototype easier to evolve
• Separate concerns when needed:
• structure in index.html
• reusable styling in styles.css
• interactions/state in app.js
• large mock content in data.js
• Do not introduce frameworks, bundlers, or package managers just for the prototype
• Keep the prototype easy to hand off, inspect, and iterate

Phase 4: Iteration

When the user provides feedback:

1. Update the relevant prototype files (index.html, optional CSS/JS/data files)
2. Update design.md if the module structure or file strategy changed
3. Summarize what changed
4. Do NOT transition to implementation code — stay in design mode

Additional Resources

Reference Files

• references/design-template.md — Design document template with Design Thinking section
• references/aesthetics-guidelines.md — Detailed frontend aesthetics: typography pairings, color theory, motion patterns, spatial composition, atmosphere techniques, and aesthetic direction reference table

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Tairitsua
• Source: Tairitsua/Monica
• License: MIT
• Homepage: https://monica.dpdns.org/

Install and usage instructions live in the source repository linked above.