Design assistant for UI mockups/wireframes, responsive HTML/CSS builds, brand kits, and presentation decks. Trigger when Codex needs to propose visual direction, lay out screens, draft or refine HTML/CSS for pages/components, assemble brand kits (palette, typography, voice, logo directions), or outline slide decks with visual guidance and speaker notes.
Use this skill to quickly collect inputs, pick a deliverable type, and ship concise design outputs. Default to fast, lightweight artifacts (textual mockups, single-file HTML/CSS, structured brand kits, slide outlines) unless the user asks for higher fidelity.
Output format (text first, then optional ASCII layout if helpful):
<style>; keep CSS small and readable.aria-* where needed, alt text, focus styles.Preferred HTML skeleton:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
--bg: #0b1021;
--surface: #111837;
--text: #e6ecff;
--muted: #9fb0d6;
--accent: #7dd3fc;
--accent-strong: #38bdf8;
--radius: 14px;
--shadow: 0 12px 40px rgba(0,0,0,0.35);
--space: 18px;
--max-width: 1080px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; background: radial-gradient(circle at 20% 20%, rgba(125,211,252,0.06), transparent 35%), #060916; color: var(--text); }
.page { max-width: var(--max-width); margin: 0 auto; padding: calc(var(--space) * 2) calc(var(--space) * 1.5); }
header, main, section { display: block; }
.hero { display: grid; gap: calc(var(--space) * 1.5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: center; }
.card { background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); padding: calc(var(--space) * 1.2); box-shadow: var(--shadow); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #05101c; border: none; border-radius: 999px; padding: 12px 18px; font-weight: 700; text-decoration: none; box-shadow: 0 10px 24px rgba(56,189,248,0.3); }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,0.18); box-shadow: none; }
@media (max-width: 720px) { .page { padding: calc(var(--space) * 1.5) var(--space); } }
</style>
</head>
<body>
<div class="page">
<header class="hero">
<div>
<p style="color: var(--muted); letter-spacing: 0.12em;">AI CRM DESIGN</p>
<h1 style="margin: 10px 0 16px; font-size: 40px; line-height: 1.05;">Design sharper experiences, faster.</h1>
<p style="color: var(--muted); font-size: 17px; line-height: 1.6;">Pair clear structure with bold gradients and ample breathing room. Swap palette/type to match brand.</p>
<div style="display: flex; gap: 10px; margin-top: 18px;">
<a class="btn" href="#">Primary action</a>
<a class="btn secondary" href="#">Secondary</a>
</div>
</div>
<div class="card">
<p style="margin: 0; color: var(--muted); font-size: 15px;">Live preview</p>
<h3 style="margin: 6px 0 14px;">Key metric panel</h3>
<div style="display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));">
<div class="card" style="padding: 14px; box-shadow: none; border-radius: 10px;">
<p style="margin: 0; color: var(--muted); font-size: 13px;">Conversion</p>
<p style="margin: 6px 0 0; font-size: 26px; font-weight: 700;">42.3%</p>
</div>
<div class="card" style="padding: 14px; box-shadow: none; border-radius: 10px;">
<p style="margin: 0; color: var(--muted); font-size: 13px;">Active deals</p>
<p style="margin: 6px 0 0; font-size: 26px; font-weight: 700;">187</p>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
HTML/CSS checklist:
Output format:
Output format: