skills.rest
klarbau
klarbauCOMMUNITY
Explore all skills by this author →
GitHub

govtech-de-design

Design GovTech DE interfaces with Sie-form German copy and design tokens.

7|1|Updated May 14, 2026
Search Tags:#accessibility#prototype#design-system#ui-mockups#lucide-icons#govtech#source-sans-3
One-click install
npx skills add https://github.com/klarbau/govtech-de --skill govtech-de-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: govtech-de-design
Source: https://github.com/klarbau/govtech-de/tree/main/docs/design-prototype-v2
Command: npx skills add https://github.com/klarbau/govtech-de --skill govtech-de-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill helps you create consistent, high-fidelity design artefacts for the GovTech DE prototype without re-reading the full project context. It keeps layouts, copy, tokens, icons, and prototype disclaimers aligned across screens, presentations, and mockups.

Core Features & Use Cases

  • Brand-aligned UI generation: Produce landing pages, dashboards, inbox views, consent flows, and autopilot wizards that follow the GovTech DE visual language.
  • Design system adherence: Apply the Source Sans 3 type scale, OKLCH token palette, Lucide icons, shadow tiers, spacing rules, and accessibility constraints.
  • Prototype-ready output: Generate realistic German UI copy in Sie-form, preserve [MOCK] disclaimers, and handle personas such as Anna Petrov, Familie Schmidt, and Mehmet Yıldız.
  • Use Case: A designer or Claude Code agent can ask for a new Umzug screen, a presentation mockup, or a polished dashboard section and get a consistent result that matches the existing product.

Quick Start

Ask the skill to create a GovTech DE mockup for a specific surface and persona, and instruct it to use the shipped design tokens, Sie-form German copy, Lucide icons, and the prototype disclaimer.

Frequently Asked Questions about govtech-de-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create German public administration UI mockups that follow GovTech design standards?▼

To create GovTech DE interfaces, generate HTML mockups using Source Sans 3 typography, OKLCH color tokens, and Lucide icons to ensure brand-aligned, citizen-first public administration prototypes.

What is the correct way to apply OKLCH color tokens and Lucide icons in a gov prototype?▼

OKLCH color tokens and Lucide icons are applied through a strict design system to maintain accessibility constraints and visual consistency across landing pages, dashboards, and consent flows in German government interfaces.

Can I generate dashboard and consent flow screens with Sie-form German copy and mock-data disclaimers?▼

Yes, you can generate dashboards, inbox views, and consent flows featuring realistic Sie-form German copy, specific personas like Anna Petrov, and preserved [MOCK] disclaimers to indicate prototype data.

Does this design system approach support accessibility constraints and tabular numerals for UI mockups?▼

Yes, the design system enforces accessibility constraints and uses tabular numerals to ensure that generated interface components, spacing rules, and typography scales are accessible and visually precise.

What are the limitations when building autopilot wizards with predefined design tokens?▼

A limitation is strict adherence to the GovTech DE visual language; outputs are constrained to predefined Source Sans 3 scales, OKLCH palettes, and specific personas, limiting custom branding outside the German public administration context.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
Galaxies-devGalaxies-dev
1

clerk-custom-ui

Customize Clerk sign-in and sign-up interfaces with branded appearance and flows.

Official
Intermediate