Claude - Proje çalışma promptu

Lässt Claude vor jeder Code-Änderung erst einen strukturierten Redesign-Plan mit UX-Audit erstellen.

Der Prompt

Plan a redesign for this web page before making any edits.

Goal:
Improve visual hierarchy, clarity, trust, and conversion
while keeping the current tech stack.

Your process:
1. Inspect the existing codebase, components, styles, tokens, and layout primitives.
2. Identify UX/UI issues in the current implementation.
3. Ask clarifying questions if brand/style/conversion intent is unclear.
4. Produce a design-first implementation plan in markdown.

Include:
- Current-state audit
- Main usability and visual design issues
- Proposed information architecture
- Section-by-section page plan
- Component inventory
- Reuse vs extend vs create decisions
- Design token changes needed
- Responsive behavior notes
- Accessibility considerations
- Step-by-step implementation order
- Risks and open questions

Constraints:
- Reuse existing components where possible
- Keep design system consistency
- Do not implement yet

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Statt sofort Code zu ändern, zwingt dieser Prompt Claude erst zu einer methodischen Bestandsaufnahme: bestehende Komponenten, Styles, Tokens und Layout-Grundbausteine inspizieren, UX/UI-Schwachstellen identifizieren, bei Unklarheiten zu Marke oder Conversion-Ziel gezielt nachfragen und erst dann einen Markdown-Plan liefern. Der Plan deckt Informationsarchitektur, Komponenten-Inventar (wiederverwenden vs. erweitern vs. neu bauen), Design-Token-Änderungen, Responsive- und Accessibility-Aspekte sowie eine konkrete Umsetzungsreihenfolge ab. Besonders wertvoll für Redesigns bestehender Webseiten, bei denen man verhindern will, dass ein KI-Agent unüberlegt drauflosprogrammiert und dabei Designsystem-Konsistenz oder bestehende Komponenten ignoriert.

Praxis-Tipp

Lass den Plan erst vom Team absegnen, bevor du Claude mit der eigentlichen Umsetzung beauftragst – so bleibt die teure Planungsphase vom Coding getrennt.

Siehe auch

• Architect Guide for Programmers

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …