菜单
Class-level workflow for refining Dutch legal/advocatuur websites to a premium standard. Two aesthetic paths: Classic Sharp (Harvey Specter / Suits) and Mercury Premium (light-weight + pill CTAs).
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Healthchecks, SSH access, model switching, and systemd debugging for the Appie fleet. Covers Appie-2 (Hetzner Hermes) and common failure modes.
Direct Google Calendar + Gmail + Contacts REST API access via Python. Use when gws CLI is broken (token cache decrypt failure) or google_api.py wrapper is unreliable. Companion to the bundled google-workspace skill.
State-of-the-art text-to-image generation with Stable Diffusion models via HuggingFace Diffusers. Use when generating images from text prompts, performing image-to-image translation, inpainting, or building custom diffusion pipelines.
Use 21st.dev Agent Elements — 25 shadcn/ui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.
Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.
Umbrella workflow for delegating coding work to local agent CLIs such as Claude Code, Codex, and OpenCode.
| name | legal-advocatuur-design-polish |
| description | Class-level workflow for refining Dutch legal/advocatuur websites to a premium standard. Two aesthetic paths: Classic Sharp (Harvey Specter / Suits) and Mercury Premium (light-weight + pill CTAs). |
Class-level workflow for refining Dutch legal/advocatuur websites to a premium standard. Use for Soleiman-like boutique law firm projects.
Two aesthetic paths are documented below — choose based on the client brief and reference inspiration:
Harvey Specter / Suits aesthetic. Sharp confidence, structured and traditional premium.
| Token | Value | Usage |
|---|---|---|
| Navy | #0f2644 | Buttons, headings, brand |
| Deep ink | #06111f | Hero, footer, dark sections |
| Ivory | #f5efe6 | Backgrounds, light cards |
| Champagne | #c9a76b | Accents, thin rules, gold details |
| Charcoal | #1a232e | Body text |
| Button radius | rounded-[4px] | Sharp corners |
| Card radius | rounded-[4px] | Sharp corners |
| Shadows | box-shadow present | Structured card elevation |
| Pattern | From | To |
|---|---|---|
| Navy | #102b4e | #0f2644 |
| Ink | #071522 | #06111f |
| Champagne | #b9945d | #c9a76b |
| Ivory | #f7f2ea | #f5efe6 |
| Button radius | rounded-full on buttons | rounded-[4px] |
| Card radius | rounded-[5px] | rounded-[4px] |
| Legal blue | #184a78 | #1a5276 |
| Muted text | #43505b | #3a4753 |
| Text muted | #5c6873 | #4f5d6a |
Inspired by Mercury (refero.style/3172cd4d). "Authority through restraint" — lighter, airier, with extreme typography and minimal chrome.
| Token | Value | Usage |
|---|---|---|
| Navy deep | #0a1628 | Hero, footer, dark sections (not #06111f) |
| Navy card | #0f2644 | Section backgrounds |
| Champagne | #d4b07a | Single accent — CTA hover, icon accent only (not text, not borders) |
| Champagne subtle | rgba(212, 176, 122, 0.2) | Hover washes |
| Ivory | #f4ede4 | Light canvas |
| Ivory card | #faf6f0 | Card surface |
| Warm charcoal | #2d3d4a | Body text |
| Champagne wash | rgba(212, 176, 122, 0.08) | Subtle glow |
| Role | Style |
|---|---|
| Hero display | 72px / weight 300 (font-light), tracking-[-0.04em] |
| Section heading | 56px / weight 400, tracking-[-0.03em] |
| Subheading label | 12px uppercase, track-[0.2em], font-bold |
| Body | 17px, leading-[1.7] |
| Font stack | Cormorant Garamond (300/500/600/700) + Manrope (400/500/600/700) |
| Element | Style |
|---|---|
| Primary CTA | rounded-full (pill) |
| Secondary button | rounded-full (pill) |
| Cards | rounded-[4px] (keep sharp) |
| Input fields | rounded-full |
| Tags/chips | rounded-full |
border border-[#0f2644]/8) insteadborder-[#d4b07a]/20 + hover:bg-white (no translate)bg-[#0a1628] instead of overlay| Device | Section padding | Between sections |
|---|---|---|
| Mobile | py-16 (64px) | gap-12 |
| Tablet+ | py-20 (80px) | gap-16 |
| Desktop | py-24 (96px) | gap-20 |
framer-motion with useScroll / useMotionValueEvent).border border-white/18) instead of plain textorigin-left scaleX via useScroll + useSpring#d4b07a (single solid, not gradient)const [hidden, setHidden] = useState(false);
const [atTop, setAtTop] = useState(true);
const { scrollY } = useScroll();
useMotionValueEvent(scrollY, "change", (latest) => {
const prev = scrollY.getPrevious();
setHidden(latest > 120 && latest > (prev ?? 0));
setAtTop(latest < 20);
});
<motion.header
animate={{ y: hidden ? -100 : 0, opacity: hidden ? 0 : 1 }}
transition={{ duration: 0.35, ease: "easeOut" }}
className={`... ${atTop ? "border-transparent bg-transparent" : "border-white/10 bg-[#0a1628]/90 backdrop-blur-2xl"}`}
>
vision_analyze with a specific promptdelegate_task with file paths and list. The subagent runs every replacement in sequence. Verify with search_files afterward. Saves ~15-20 manual patch calls.npm run build, then vercel --yes)git add && git commit && git push origin main) or manual vercel --prod --yescurl and optionally a screenshotFull Exa search results with URLs in references/legal-design-exa-research-2026-06.md===ME:weblyfe-webdesign-stack