メニュー
Establishes the visual foundation for a website — fonts, colors, spacing, animations, and aesthetic direction. Use before building any pages. Reads docs/style-brief.md for brand direction.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | design-system |
| description | Establishes the visual foundation for a website — fonts, colors, spacing, animations, and aesthetic direction. Use before building any pages. Reads docs/style-brief.md for brand direction. |
Establish a cohesive, distinctive visual identity for the website before any pages are built.
Read docs/style-brief.md for:
Also read docs/company-profile.md for industry context.
Based on the industry and brief, commit to ONE bold direction:
| Industry | Good Directions |
|---|---|
| Legal / Finance | Editorial, Luxury, Art Deco, Swiss/Grid |
| Healthcare | Organic, Warm Minimal, Soft Geometric |
| Tech / SaaS | Neo-Brutalist, Bold Geometric, Futuristic |
| Creative Agency | Maximalist, Experimental, Avant-Garde |
| Real Estate | Luxury, Editorial, Warm Modern |
| Education | Playful, Friendly, Colorful Minimal |
| Restaurant / Food | Organic, Warm, Textured, Artisanal |
| Construction | Industrial, Bold, Utilitarian |
| NGO / Non-profit | Warm, Human, Earthy, Hopeful |
NEVER default to: purple gradient on white, generic SaaS card layout, Inter + gray + rounded corners.
Choose fonts from Fontsource (npm packages, self-hosted):
Install via: npm install @fontsource-variable/{font-name} or npm install @fontsource/{font-name}
Import in src/styles/global.css:
@import '@fontsource-variable/clash-display';
@import '@fontsource/dm-sans/400.css';
@import '@fontsource/dm-sans/500.css';
@import '@fontsource/dm-sans/700.css';
Rules:
Define in tailwind.config.mjs:
export default {
theme: {
extend: {
colors: {
primary: {
50: '...',
100: '...',
// ... full scale 50-950
DEFAULT: '...', // 600 or 700 usually
},
secondary: { /* ... */ },
accent: { /* ... */ },
neutral: { /* ... */ },
surface: {
DEFAULT: '...', // page background
raised: '...', // cards, elevated elements
sunken: '...', // recessed areas
}
},
fontFamily: {
display: ['Clash Display Variable', 'sans-serif'],
body: ['DM Sans', 'sans-serif'],
},
}
}
}
Color rules:
Create src/styles/global.css:
@import 'tailwindcss';
/* Font imports */
@import '@fontsource-variable/...';
/* CSS Custom Properties for non-Tailwind use */
:root {
--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Selection color matching brand */
::selection {
background-color: var(--color-primary-200);
color: var(--color-primary-900);
}
/* Scroll-triggered animation utilities */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s var(--transition-smooth),
transform 0.6s var(--transition-smooth);
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays for groups */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
Use a lightweight Intersection Observer script (add to BaseLayout):
// Scroll animation observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
For more complex animations (parallax, text reveals), use GSAP:
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
Only import GSAP where actually needed (Astro island architecture handles this).
Document these design decisions for the page-builder to follow:
Buttons:
Cards:
outer radius = inner radius + padding. For example, a card with rounded-2xl (16px) and p-4 (16px) padding means inner elements get rounded-xl (12px) or less — NOT rounded-2xl. If both radii match, nested corners look bulgy and uneven. Subtract the padding from the parent radius to get the correct inner radius.bg-white/15 backdrop-blur-lg border border-white/20 — see liquid-glass-effects.md for full guide and sector-specific suitabilitySections:
Images:
For projects where glassmorphism suits the brand (Corporate, Tourism, Portfolio, Creator sectors), consult liquid-glass-effects.md for:
prefers-reduced-motion, prefers-contrast)Rule of thumb: Glass is seasoning, not the main course — use it on 2-3 key elements, not the entire page.
Before starting design decisions, review Universal Design Guidelines for:
This skill applies those universal principles to your specific sector/brand.
Create these files:
tailwind.config.mjs — with full theme configurationsrc/styles/global.css — with font imports, base styles, animation utilitiesdesign-tokens.md — a reference document summarizing all design decisions for other skills to readThe design-tokens.md should include:
Ensures every website element — layout, messaging, navigation, imagery, CTAs — reflects the client's brand identity and speaks clearly to their ideal customer. Use before and during page building to validate that the site feels intentional, cohesive, and trustworthy.
Select optimal color palettes for websites using brand colors and color theory. Use when users need to define their website's color scheme, generate complementary palettes, ensure accessibility compliance, or refine existing colors for better visual impact and industry alignment.
Builds multi-language Astro site, verifies output for all language versions, generates deployment scripts and Nginx configuration with root redirect and language-aware routing. Supports English, French, Kiswahili. Use after all pages are built, as the final step.
Analyses up to 5 reference websites provided by the client, visits each one, and generates a structured design guide (docs/design-reference.md) that captures the patterns, features, and qualities the client admires. Use when the client provides URLs of websites they like. Run before design-system.
Language and tone standard for all written content. Enforces authentic East African English as used in Uganda, Kenya, and Tanzania — formal, clear, respectful, British-influenced, and professionally courteous. Apply to every piece of text generated for the website.
Secure email sending from static websites using PHP + PHPMailer on Apache/WAMP. Self-hosted contact form handler with 4-layer spam prevention (honeypot, timing, content scan, rate limiting), stateless CSRF, beautiful branded HTML emails, and bilingual support. No external services required.