원클릭으로 Manus에서 모든 스킬 실행

govtech-de-design

스타7

포크1

업데이트2026년 6월 10일 18:54

Use this skill to generate well-branded interfaces and assets for GovTech DE — a speculative-design prototype for a citizen-first interaction layer over the German public-administration stack (DeutschlandID + EUDI Wallet + Deutschland-Stack). Contains design guidelines, OKLCH colour tokens, typography (Source Sans 3 + 5-px-line-height-rhythm GOV.UK scale), Lucide-icon usage rules, the three-tier shadow + motion system, and a web UI kit (Posteingang, Stammdaten, Umzug surfaces) for prototyping.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

klarbau

klarbau/govtech-de

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

GovTech DE Design Skill

Read the README.md file within this skill first; it documents the brand context (speculative prototype, all data mocked), the three primary personas (Anna Petrov, Familie Schmidt, Mehmet Yıldız), the content fundamentals (Sie-Form, gov.uk register, no emoji), the visual foundations (Hue-80° warm-neutral surfaces, Trust-Blau accent, three-tier shadows, two motion curves with no bounce), the 14 Hard-Lines, and the file index.

Then explore the other files:

colors_and_type.css — Drop into any HTML artefact; --ds-* tokens + .ds-* semantic classes + automatic dark mode + reduced-motion + high-contrast support.
assets/ — Brand mark (logo-mark.svg) and wordmark (logo-wordmark.svg). Iconography is lucide-react (ISC) — load via CDN from https://unpkg.com/lucide@latest/dist/umd/lucide.min.js for static artefacts.
fonts/README.md — Source Sans 3 (SIL-OFL) via Google Fonts CDN; substitution notes.
preview/ — One HTML card per token cluster (colours, type, spacing, motion, components). Use as visual reference.
ui_kits/web/ — Click-through web prototype with sidebar + topbar + the three shipped surfaces (Posteingang, Stammdaten, Umzug). Copy the component you need into your artefact.

When generating artefacts

Slides, mocks, throwaway prototypes: Copy colors_and_type.css (or its :root block) into the artefact. Use .ds-* classes for headings + body. Reference Lucide via CDN. Never emit emoji. Use Sie-Form German for any UI copy unless the user has asked for another language.
Production code: The upstream Next.js app is at https://github.com/klarbau/govtech-de. Read its CLAUDE.md for tech-stack constraints (Next.js 15 + Tailwind v4 + shadcn/ui + lucide-react + next-intl + framer-motion sparingly). Apply the same --ds-* tokens — they map 1:1 to src/app/globals.css in the live app.

Default behaviour on plain invocation

If the user invokes this skill without further guidance, ask them:

What are you building? (a slide / a mock / a prototype / production code)
Which surface? (Posteingang / Stammdaten / a Vorgangs-wizard / Dashboard / something new)
Which persona's data? (Anna / Schmidt / Mehmet — or generic)
In which language? (Deutsch is default; EN / RU / UK / AR / TR also supported via next-intl)
Light, dark, or both? (Both is default — prefers-color-scheme is honoured automatically.)

Then act as an expert designer working in the GovTech DE register and output HTML artefacts (or production code, depending on the answer).

Non-negotiable rules

Never use emoji.
Never frame Source Sans 3 as a "BundesSans alternative". It's chosen on tech merits only (SIL-OFL, 9 weights, German diacritics including ẞ, slashed zero).
Never colour-code Behörden categories (Bund / Land / Kommune are text-only).
Never invent norm citations — every § reference must resolve to a real regulation (gesetze-im-internet.de).
Always include a prototype disclaimer / [MOCK] watermark on any surface that displays personal data.
Always use tabular numerals (font-variant-numeric: tabular-nums or .ds-tabular) for Aktenzeichen, FE-Nr, IBAN, Renten-Nr, Fristen.

이 저장소의 다른 Skills

같은 저장소

ckm-brand

klarbau/govtech-de

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

2026-05-297

ckm-design-system

klarbau/govtech-de

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

2026-05-297

ckm-ui-styling

klarbau/govtech-de

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

2026-05-297

design-everyday-things

klarbau/govtech-de

Apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", "fault tolerance", "mental model", "mapping", or "seven stages of action". Also trigger when diagnosing why users make mistakes, reducing product complexity, or improving error messages and feedback systems. Covers the gulfs of execution and evaluation. For usability scoring, see ux-heuristics. For iOS-specific patterns, see ios-hig-design.

2026-05-147

design-sprint

klarbau/govtech-de

Run a structured 5-day process to prototype, test, and validate product ideas with real users. Use when the user mentions "design sprint", "validate in a week", "rapid prototype", "test with users", "de-risk before building", "GV sprint", "prototype testing", or "design workshop". Also trigger when a team needs to make a critical product decision quickly, resolve stakeholder disagreements, or test risky ideas before investing in development. Covers mapping, sketching, deciding, prototyping, and testing. For ongoing experimentation, see lean-startup. For customer job analysis, see jobs-to-be-done.

2026-05-147

ios-hig-design

klarbau/govtech-de

Design native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", "HIG compliance", "SF Symbols", "haptic feedback", or "iOS accessibility". Also trigger when building tab bars, navigation stacks, sheets, or modals for iOS, implementing dark mode, or adapting layouts for different screen sizes. Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things.

2026-05-147

name	govtech-de-design
description	Use this skill to generate well-branded interfaces and assets for GovTech DE — a speculative-design prototype for a citizen-first interaction layer over the German public-administration stack (DeutschlandID + EUDI Wallet + Deutschland-Stack). Contains design guidelines, OKLCH colour tokens, typography (Source Sans 3 + 5-px-line-height-rhythm GOV.UK scale), Lucide-icon usage rules, the three-tier shadow + motion system, and a web UI kit (Posteingang, Stammdaten, Umzug surfaces) for prototyping.
user-invocable	true

GovTech DE Design Skill

Then explore the other files:

colors_and_type.css — Drop into any HTML artefact; --ds-* tokens + .ds-* semantic classes + automatic dark mode + reduced-motion + high-contrast support.
assets/ — Brand mark (logo-mark.svg) and wordmark (logo-wordmark.svg). Iconography is lucide-react (ISC) — load via CDN from https://unpkg.com/lucide@latest/dist/umd/lucide.min.js for static artefacts.
fonts/README.md — Source Sans 3 (SIL-OFL) via Google Fonts CDN; substitution notes.
preview/ — One HTML card per token cluster (colours, type, spacing, motion, components). Use as visual reference.
ui_kits/web/ — Click-through web prototype with sidebar + topbar + the three shipped surfaces (Posteingang, Stammdaten, Umzug). Copy the component you need into your artefact.

When generating artefacts

Slides, mocks, throwaway prototypes: Copy colors_and_type.css (or its :root block) into the artefact. Use .ds-* classes for headings + body. Reference Lucide via CDN. Never emit emoji. Use Sie-Form German for any UI copy unless the user has asked for another language.
Production code: The upstream Next.js app is at https://github.com/klarbau/govtech-de. Read its CLAUDE.md for tech-stack constraints (Next.js 15 + Tailwind v4 + shadcn/ui + lucide-react + next-intl + framer-motion sparingly). Apply the same --ds-* tokens — they map 1:1 to src/app/globals.css in the live app.

Default behaviour on plain invocation

If the user invokes this skill without further guidance, ask them:

What are you building? (a slide / a mock / a prototype / production code)
Which surface? (Posteingang / Stammdaten / a Vorgangs-wizard / Dashboard / something new)
Which persona's data? (Anna / Schmidt / Mehmet — or generic)
In which language? (Deutsch is default; EN / RU / UK / AR / TR also supported via next-intl)
Light, dark, or both? (Both is default — prefers-color-scheme is honoured automatically.)

Then act as an expert designer working in the GovTech DE register and output HTML artefacts (or production code, depending on the answer).

Non-negotiable rules

Never use emoji.
Never frame Source Sans 3 as a "BundesSans alternative". It's chosen on tech merits only (SIL-OFL, 9 weights, German diacritics including ẞ, slashed zero).
Never colour-code Behörden categories (Bund / Land / Kommune are text-only).
Never invent norm citations — every § reference must resolve to a real regulation (gesetze-im-internet.de).
Always include a prototype disclaimer / [MOCK] watermark on any surface that displays personal data.
Always use tabular numerals (font-variant-numeric: tabular-nums or .ds-tabular) for Aktenzeichen, FE-Nr, IBAN, Renten-Nr, Fristen.