KOSTENLOSE TOOLS

Kostenlose Tools für UI-Design.

Kleine, kostenlose Tools für die Alltagsarbeit beim Gestalten mit Codex: Bilder vorbereiten, Farben auswählen, Kontrast prüfen und eine DESIGN.md schreiben. Jedes läuft in deinem Browser, ohne Upload und ohne Anmeldung.

Die Tools

• Bildkonverter: PNG, JPG und WebPWandle Bilder zwischen PNG, JPG und WebP um, mehrere auf einmal, und vergleiche die Dateigrößen.
• Farbpalette aus Bild erstellenHol dir die Hauptfarben eines beliebigen Bildes als HEX-Codes, die häufigste zuerst.
• Kontrast-Checker für WCAG 2.2Prüfe eine Text- und Hintergrundfarbe gegen AA und AAA.
• DESIGN.md-GeneratorMach aus deinen Farben, Schriften und Abständen eine DESIGN.md für Codex.
• Farbpaletten-GeneratorErzeuge fünf harmonische Farben aus einer beliebigen Farbe, sperre die, die dir gefallen, und kopiere sie als HEX, Tailwind oder DESIGN.md.
• Tailwind-Farbpaletten-GeneratorMach aus einer Farbe eine Skala von 50 bis 950, berechnet in OKLCH, als @theme-Block für Tailwind v4.
• OKLCH-FarbkonverterWandle HEX-, rgb()- und hsl()-Farben in OKLCH um und zurück, mit Warnung außerhalb von sRGB.
• shadcn-Theme-GeneratorErstelle aus einer Farbe ein komplettes helles und dunkles shadcn/ui-Theme, mit Live-Vorschau.

So greifen sie ineinander

1. Zieh Farben aus einer Referenz, etwa einem Foto, einem Screenshot oder einem Mockup, das dir gefällt, mit dem Farbpaletten-Tool.
2. Prüf mit dem Kontrast-Checker, ob Text auf diesen Farben gut lesbar bleibt.
3. Halte alles in einer DESIGN.md fest, mit dem Generator, damit Codex auf jedem Screen dieselben Farben, Schriften und Abstände verwendet.
4. Wandle die Bilder für die fertigen Seiten in WebP um, damit sie schneller laden.

Den Workflow lernen

• DESIGN.md: dein Designsystem für CodexDas DESIGN.md-Format, ein vollständiges Beispiel und wie du Codex dazu bringst, sich daran zu halten.
• UI-Design mit Codex: So geht’sEin Workflow in sechs Schritten vom Design-Briefing bis zum Produktionscode, mit Prompts zum Kopieren.