www.dft.hu from scratch – 20 UI concepts · Claude Design prompt (MAX)

For Claude Design. The prompt is in English. Every piece of UI text is Hungarian, with correct accents (ő, ű). Read every attachment before you draw anything.

Design 20 distinct UI concepts for the new website of DFT-Hungária Zrt. (www.dft.hu). The company is a Budapest human-development firm founded in 1993, with a 30-year track record; its motto is „Jót és jobban”. The attachments contain the whole current site: its structure, texts and screenshots. It works, but it is dated, crowded and text-heavy. The new site must feel like Apple designed it for DFT: minimalist, calm, confident, and genuinely delightful, full of meaningful icons and motion, with not a single dry paragraph.

Show what a world-class product designer you are: treat this as the portfolio piece that gets you hired at Apple. Go all out and use your absolute maximum thinking on every concept, every section and every string. I don't want to see one AI blob. A generic corporate template, a stock-photo hero or a wall of text counts as failure.

0. How this job runs

1. Maximum output. Draw every screen as a real, high-fidelity design with real Hungarian copy and real DFT content from the attachments. Never describe a screen instead of drawing it. No lorem ipsum, no "etc.", no "the rest is similar".
2. Several turns.
   • First the „Mesterek" board (§0b) and the overview board (§5.1).
   • Then the concepts in batches of 4 (1–4, 5–8, 9–12, 13–16, 17–20).
   • Then the comparison board and recommendation (§5.4), with the v3 of the top 3 and the „Önkritika" (§5b).

If a turn is ending, stop after a finished concept and write one line: „Kész: … · Következik: …". Kevin replies „folytasd". Continue at the same quality, and never make later concepts thinner.

1. Twenty means twenty different ideas. Each concept needs its own layout system, its own way of using the curve, its own icon language and its own signature motion, all within the same DFT bloodline (§1). Concepts that differ only in colour or rounding count as duplicates.
2. Think before drawing. For each concept, first write its one-sentence big idea and who it serves best. Then design so that a first-time visitor understands in 5 seconds what DFT does for them and what to click.
3. Think wide. For each concept, explore at least 5 ways to execute its big idea in your head. Throw away the obvious ones (they are everyone's first idea), and build the one that is true to DFT and surprising. On each concept board, show one rejected hero alternative, small, with one line on why it lost.
4. Draw in rounds. Every concept goes through at least 2 internal rounds before anyone sees it.
   • Each concept board shows its hero as v1 → v2, with a one-line change log.
   • In the last turn, the top 3 get a v3 of the home page.
5. Craft is the standard. Every concept passes the AI-tells audit and the tests in §5b before it's shown.

0b. Research first: the „Mesterek" board

Before you draw anything, study how the best teams build websites that are calm, clear and delightful: their process, not just their look. Search the web if you can; if you can't, work from what you know.

• Apple.com product pages: one idea per screen, scroll storytelling, big type, motion that explains.
• The Apple Human Interface Guidelines and SF Symbols: clarity, depth, the SF type system, icon construction and animation.
• Stripe.com and Linear.com: motion craft, restraint, and making a complex offer clear.
• Nielsen Norman Group: homepage usability, the 5-second test, how people scan (F-pattern and layer-cake), information scent, and navigation for large sites. That matters here: the current site has 1 397 pages.
• Steve Krug, Don't Make Me Think, and the GOV.UK Design System: plain language, and a funding-check flow anyone can finish.
• The Disney 12 principles, at UI scale: anticipation, weight, follow-through, settle.
• Susan Kare and Otl Aicher: icon sets with one construction system and one voice.

Deliver the „Mesterek" board (Hungarian UI): for each source, the one principle you're taking, and the concepts that use it.

1. The DFT bloodline (non-negotiable in every concept)

Green family

Build on the DFT green #006745, the logo square. Every concept defines its own 5–7 shade palette from this family and shows it with hex values. The anchor shades:

• One cool accent is allowed: the blue-grey #566F92.
• No other hues, and no red. Errors use the blue with a „!” icon.
• Green must feel fresh and alive: never "bank" or "hospital".

Typography: Apple SF family only

• SF Pro Display for headlines, SF Pro Text for body, SF Pro Rounded where warmth helps, SF Mono only for numbers and data.
• Web stack: -apple-system, BlinkMacSystemFont, "SF Pro Display" | "SF Pro Text", Inter, sans-serif.
• Never embed Apple font files: Apple's licence doesn't allow SF on the web. The system stack renders SF on Apple devices, and Inter elsewhere. Show one screen of each concept in the Windows/Chrome rendering too, and make sure it still looks right.
• Headlines are big and tight (−0.03 to −0.05em), with tabular figures for numbers.
• No other typefaces: not Poppins, Roboto or Montserrat as on the current site.

The curve („g-ív”)

The rising, tapered curve from the DFT logo (see 02 DFT Felivelo Vonal - design system.md: the „Felívelő Vonal”) is the brand's gesture: growth, „jobban”.

• Every concept uses it as its core motif, each in a different way. For example:
  • section dividers and progress lines;
  • the scroll path;
  • the shape of cards and buttons;
  • hover underlines;
  • chart lines;
  • image masks;
  • the loader;
  • the nav indicator.
• It is the only decorative element: no blobs, no random gradients, no confetti.

The logo

• Use the official lockup (01 dft-hungaria-logo.svg) in the header and footer; on dark backgrounds use 01 dft-hungaria-logo - feher szoveg sotet hatterre.svg. The square mark (01 dft-icon.svg) serves as the favicon and app icon.
• Never redraw, recolour or stretch it.

Minimalist, but a great feeling

• Generous white space, one idea per screen, clear hierarchy.
• It should still feel warm and human: real people (DFT's own trainers and colleagues), real numbers, real stories.

No dry text

Rewrite every piece of copy from the attachments into short, human, benefit-first Hungarian.

• The current site uses magázás (Ön); keep it, but make it warm and direct.
• Headlines at most 8 words; paragraphs at most 2 short sentences.
• Turn lists into icons, numbers into counters, processes into step lines, and FAQs into expanding cards.
• Keep every fact accurate: dates, numbers, program names, contact details.

Lots of icons

• Every concept designs its own consistent custom icon set, never generic stock icons: 24 px grid, one stroke weight, built from the curve and the DFT square.
• The set covers at least:
  • the 10 services;
  • the 11 training topics;
  • the 5 applicant groups;
  • the funding programmes;
  • contact, event, video, download, search and menu.
• Show at least 24 icons per concept, at 24 px and 48 px, on light and dark.

Lots of animation, all of it meaningful

Every concept has three signature motions, each shown as a storyboard (frames plus timing):

• the hero entrance;
• one scroll-driven story;
• one micro-interaction (hover, press or icon animation).

Motion rules:

• Easing is cubic-bezier(.15,.85,.35,1); durations are 200–900 ms.
• Curves draw from left to right, numbers count up, icons animate once on hover.
• Nothing loops forever. Under prefers-reduced-motion, show the final state.

Also

• Accessibility: WCAG AA contrast, visible focus, tap targets of 44 px or more, and meaning never carried by colour alone.
• Layout: desktop at 1440 px and mobile at 390 px (mobile is at least half the traffic).
• Hungarian formatting: 2026. október 28., 1 500 000 Ft, +36 1 266 7601.

2. Who the site is for, and what it must sell

The audiences (the current site's „Pályázók” and „Jogosultságvizsgálat” sections):

• vállalkozások (KKV-k)
• önkormányzatok
• civil szervezetek
• egyházak
• köznevelési és közművelődési intézmények

HR leaders and executives also come for training.

The offers (see 03):

• Services: képzés és tréning, elemzés és kutatás, tanácsadás, coaching, szakmai kiadványok, szakmai rendezvény, workshop, pályázatírás és pályázati projektmenedzsment, eseményszervezés, projektmegvalósítás.
• Training topics: 11 of them, including együttműködés, vezetőfejlesztés, kommunikáció, hatékonyságnövelés, wellbeing, lean és agilitás, motiváció.
• The flagship course: „ProQM: Munkavégzés mesterfokon”, taught by Dr. Csikesz Tamás.
• Funding: GINOP Plusz, DIMOP Plusz, TOP Plusz, EFOP Plusz, KEHOP Plusz, KAP, RRF, plus a free eligibility check („díj- és kötelezettségmentes jogosultságvizsgálat”). This is the biggest lead generator.
• Also: events and webinars (a „Videótár” with 50+ free recordings), expert articles, publications, terembérlés.

The proof:

• 30 years (since 1993);
• „Az Év Felnőttképzője 2026 – Soft skill fejlesztés kategória, III. helyezett”;
• references and media appearances (Bizalmi.hu, Haszon, Digital Hungary, Origo, Gazdasági Portál, K&K, HRPWR, Dívány);
• the team and trainers.

The main actions on the site:

1. „Jogosultságvizsgálatot kérek” (the eligibility check).
2. Book a training or consultation.
3. Register for an event or webinar.
4. Contact: 1135 Budapest, Szegedi út 54. 1. emelet · +36 1 266 7601 · info@dft.hu.

The current site has 1 397 pages. Every concept must propose a simplified navigation of at most 6 top-level items that still covers all of this, and must show the mobile menu.

3. What to draw for each concept (all 20)

1. Concept card:
   • name (Hungarian, 1–2 words);
   • the big idea in one sentence;
   • who it serves best;
   • its green palette with hex values;
   • its SF type scale;
   • how it uses the curve.
2. Home page, desktop 1440, full length:
   • header with the logo and the simplified navigation;
   • hero;
   • „Kinek segítünk” (the 5 audiences);
   • services;
   • the eligibility check;
   • ProQM or the next event;
   • proof (30 years, the award, references, media);
   • expert content and the Videótár;
   • team;
   • contact and footer.

Every section must look like it belongs to this concept.

1. Home page, mobile 390: the hero, two key sections, and the open menu.
2. One inner page, desktop plus mobile. Across the 20 concepts, together, cover all of these (about 2–3 concepts per page type):
   • a service page (e.g. Coaching);
   • the funding finder / eligibility-check flow;
   • a training-topic page;
   • the team and trainers page;
   • an event or webinar page with registration;
   • the Videótár / expert-content library;
   • the about page („Miért a DFT?”, credo, 30 years);
   • contact.
3. The icon set: at least 24 icons, light and dark, 24 and 48 px.
4. Motion: storyboards of the 3 signature motions, with timings.
5. Components: buttons (primary, secondary, ghost; with hover, pressed, focus and disabled states), cards, the form field with its error state, tags, and the nav indicator.

4. The 20 directions (starting seeds – make each one sharper, but keep them all different)

1. Felívelő ív: the logo curve literally carries the page. One continuous line runs from the hero down the whole page and rises with each section.
2. Zöld rétegek: depth through stacked green planes, like Apple's layered materials, with a parallax of greens.
3. Kert: growth as a quiet metaphor. Icons sprout, sections bloom, and the eligibility check "grows" as you answer.
4. Térkép: the site as a navigable map. The 5 audiences are regions and services are routes; the curve is the path.
5. Bento: an Apple-style bento grid of live tiles (counters, next event, video, quote, funding call) on every page.
6. Magazin: an editorial layout with huge SF headlines and expert content first, like a premium HR magazine.
7. Számokban: data-led. Every section opens with a real number (30 years, 50+ webinars, the award) that animates in.
8. Emberek: people-first, with real DFT trainers and colleagues as calm circular portraits. The curve links people to topics.
9. Üveg és fény: Liquid-Glass-style translucent panels over soft green light. Premium and light, never flashy.
10. Papírkivágás: layered paper cut-outs whose edges are DFT curves. Warm, tactile, with slow parallax.
11. Egy vonal: single-line drawings, where every icon and illustration is one continuous stroke that draws itself.
12. Pályázat-iránytű: a funding-first site. The eligibility check is the hero, a 3-question interactive start.
13. Naptár: events-first, a living timeline of upcoming trainings, webinars and open days on a curve.
14. Videótár: video-first, a calm media hub for the 50+ recordings, with a chaptered player UI.
15. Mesterfok: premium dark mode in Mélyzöld with light type. The ProQM course and the award lead; it feels like a masterclass.
16. Út a jobb felé: a gamified skills path. A visitor picks a goal, the curve shows the steps, and each service is a milestone.
17. Tipó: typographic minimalism. Almost no images, giant SF Pro Display, and the curve as the only graphic.
18. Agyag: soft matte 3D clay icons in greens, friendly and tactile (Apple-Memoji-level craft, not childish).
19. Mozgásban: motion-first scroll storytelling, where each scroll step reveals one idea with a signature transition.
20. Rendszer: a Swiss grid with rigorous modules, SF Mono data labels and precise curves. For readers who trust structure.

5. Boards

1. Overview board (first turn):
   • the 20 concept cards on one canvas;
   • the shared bloodline (palette anchors, the SF scale, the curve and logo rules);
   • the simplified sitemap shared by all concepts;
   • the rewritten Hungarian copy deck: every headline and CTA in the new „no dry text” voice.
2. Each concept: the §3 deliverables on one board, titled „{no}. {name}”.
3. Prototypes: make the home page of concepts 1, 12 and 15 clickable, with hover and scroll motion working, plus the mobile menu.
4. Comparison and recommendation (last turn):
   • all 20 home heroes side by side;
   • a score table: first impression, clarity in 5 s, DFT bloodline, icon and motion craft, how well it fits 1 397 pages of content, and build effort;
   • a top 3 with reasons;
   • one paragraph on what Dr. Csikesz Tamás may object to in each of the top 3, and the answer.

5b. The craft standard, the tests and the self-critique

The AI-tells audit for websites (any tell means a redesign of that section)

1. A stock-photo hero with smiling people at a laptop.
2. The generic hero: a centred headline, a sub-line and two buttons, whatever the idea.
3. Three columns of feature cards with generic icons.
4. Gradient blobs, mesh backgrounds, glow or particles.
5. A testimonial carousel, a logo wall used as filler, or fake numbers.
6. Every section the same card grid, with no rhythm between sections.
7. Walls of text, or thin grey text for things people need.
8. ALL-CAPS microcopy everywhere.
9. Stock icons (Lucide, Heroicons…), or icons without a job.
10. "Tovább / Részletek" buttons everywhere instead of saying what happens.
11. Parallax or motion for its own sake; anything that loops or distracts.
12. Fake urgency or dark patterns.
13. Navigation with more than 6 items, or a footer with 80 links.
14. Layouts that only work with short English strings and break with Hungarian ones.
15. Anything that could be any other consultancy's website.

Tests (run them, and show the results on each concept board)

• 5-second test (Nielsen Norman Group): after 5 seconds on the home page, a first-time visitor can say what DFT does for them and what to click.
• First-fixation test: the eye lands on the most important thing first.
• Squint test: the hierarchy survives blur.
• Content-fit test: the concept survives real, long content: a 1 200-word expert article, a training page with 11 modules, the longest funding programme name, and the deepest page of the 1 397.
• Hungarian string test: the longest real headlines and menu items, with no truncation that changes the meaning.
• Mobile thumb test (390 px): the main actions sit within thumb reach, and the menu opens and closes cleanly.
• Accessibility: contrast measured and shown, visible focus, 200 % zoom, and reduced motion.
• Performance budget: the hero must be able to reach LCP under 2.5 s on a mid-range phone. No autoplaying hero video; motion uses only transform, opacity, clip-path and stroke-dashoffset. Say how each concept keeps to this.
• Structure for search: one H1 per page, semantic headings, crawlable navigation. The site has 1 397 pages, so search traffic matters.
• Tamás test: is it obviously, immediately better than today's dft.hu, and does it feel like DFT, „Jót és jobban"?

Self-critique („Önkritika")

• On every concept board: its 1–2 biggest weaknesses, in one honest line each.
• In the last turn: for the top 3, what you'd change with one more day, and every place where you had to interpret the content or the brief, so Kevin can confirm it.

STOP after the last turn and ask Kevin in Hungarian: „Melyik 3 koncepció menjen Tamás elé, vagy melyik keverék? Ha megvan, kidolgozom a választott irányt az összes fő aloldallal."

6. Attachments (flat pack)

7. Acceptance checklist (all must be true)

• [ ] 20 concepts that are genuinely different, each with every §3 deliverable, in Hungarian, at high fidelity.
• [ ] Only DFT greens (plus the blue-grey accent), no red; the SF family only; the official logo, unaltered.
• [ ] The curve is the core motif in every concept, used differently each time; no other decoration.
• [ ] No dry text: short, human copy, with lists turned into icons, numbers and steps; every fact accurate.
• [ ] At least 24 custom icons per concept; 3 storyboarded signature motions per concept, with reduced-motion states.
• [ ] Simplified navigation (at most 6 items) covering all content; every mobile view drawn.
• [ ] The overview board, 3 clickable prototypes, and the comparison with a top 3.
• [ ] The „Mesterek" board exists; every concept shows one rejected hero alternative and its hero as v1 → v2; the top 3 have a v3.
• [ ] Every concept passed the AI-tells audit and the §5b tests, with the results shown on its board; no embedded Apple font files.
• [ ] The „Önkritika" is done, with every interpretation listed for Kevin, and the turn ends with the STOP question.