GETMDvibe coding prompts
CybersecuritySite developmentDESIGN.MD

AhnLab

Integrated build prompt · An end-to-end product, UX, UI, frontend, SEO/AEO, and QA specification inspired by AhnLab

QUICK ANSWER

How can I build a site using AhnLab's information architecture as a reference?

Use the development prompt and DESIGN.MD on this page together. The development prompt defines features, information architecture, states, and SEO for protecting identities, devices, and organizations; DESIGN.MD fixes screen structure, tokens, components, responsive behavior, and accessibility.

Development criteria

It turns the relationships and states of identities, threats, and policies, key user flows, recovery paths, and completion conditions into an implementable specification.

Design criteria

Start from operational console · conservative and security-first · high information density · project navigation -> key metrics -> operations table or logs -> response action, while avoiding the original logo, proprietary copy, images, and pixel-level layout.

Risk to validate

Treat false confidence, access control, and incident response as a primary design risk and define loading, empty, error, partial-data, and success states.

How to use it

  1. Replace the users, core features, and technology stack in the development prompt with your project details.
  2. Give DESIGN.MD to your AI builder or coding agent as the persistent design standard.
  3. Validate 360px, 768px, and 1280px layouts, keyboard navigation, and error states against the checklist.

REFERENCE & BLUEPRINT

Live site and design preview

operational console · conservative and security-first · high information density
Public live sitePublic landing screen
Open site ↗
AhnLab website prompt and DESIGN.MD
Brand-structure blueprintA preview based on the service category's color and screen structure
Primary color #0054A6operational consoleconservative and security-firsthighproject navigation -> key metrics -> operations table or logs -> response action

GETMD checks two capture providers in parallel and uses the fastest valid image. When region, login, or site policy blocks capture, a branded structural fallback is shown automatically.

COPY-READY PROMPT

Prompt Markdown preview

AhnLab

Integrated build prompt · Cybersecurity · Product, UX, UI, frontend, SEO/AEO, performance, and QA in one build specification.

When to use this prompt

Use this document when you are planning, designing, or building a product where protecting identities, devices, and organizations matters. Study the public information architecture of AhnLab , but reinterpret it for your own problem. Do not reproduce its logo, copy, images, proprietary assets, or pixel-level layout.

  • Reference service: AhnLab
  • Core entities: identities, threats, and policies
  • Primary risk: false confidence, access control, and incident response
  • Starting interface direction: operational console · conservative and security-first · high information density · project navigation -> key metrics -> operations table or logs -> response action · #0054A6 · AhnLab

Public interface design analysis

  • Reference basis: These are recurring visual and structural patterns from public landing screens and representative task flows. Verify the current live capture because services change over time.
  • Interface archetype: operational console
  • Tone and manner: conservative and security-first
  • Information density: high
  • Color strategy: high-contrast brand accents on dark surfaces (#0054A6)
  • Navigation model: sidebar-led context switching
  • Structural sequence: project navigation -> key metrics -> operations table or logs -> response action
  • Reusable patterns: risk notice, threat table, status badge, identity panel, response action
  • Independent application rule: Use the order and decision principles only. Do not reproduce logos, copy, imagery, icons, or proprietary screen composition.

Project inputs to replace

product_name: "[Your product name]"
target_users: "[Primary users and context]"
problem: "[Problem they need to solve]"
core_features: "[Three to five essential features]"
business_goal: "[Conversion, activation, retention, or another metric]"
technology_stack: "[For example, Next.js and Tailwind CSS]"
brand_tone: "[For example, clear, calm, and trustworthy]"

Copy-ready prompt

Act as a senior product designer, UX strategist, frontend architect, and technical SEO lead.

Create an implementation-ready product specification and, when requested, production-quality code for [Your product name]. Use AhnLab (https://www.ahnlab.com) only as a reference for information architecture and decision flow in a product designed for protecting identities, devices, and organizations. Do not copy the service's brand, logo, wording, images, protected assets, or exact screen composition.

Project context:
- Target users: [Primary users and context]
- Problem: [Problem they need to solve]
- Core features: [Three to five essential features]
- Business goal: [Conversion, activation, retention, or another metric]
- Technology stack: [Framework, styling, data, and hosting]
- Brand tone: [Voice and visual character]

Required design and implementation criteria:
1. Make the relationships and states of identities, threats, and policies understandable at a glance.
2. Provide prevention, explanation, and recovery paths for false confidence, access control, and incident response.
3. Specify loading, empty, error, success, disabled, permission-denied, and partial-data states.
4. Preserve content priority and navigation at 360px, 768px, and 1280px.
5. Use semantic HTML, logical keyboard order, visible focus, 44px touch targets, and WCAG AA contrast.
6. Define page structure, components, data, actions, microcopy, edge cases, and measurable acceptance criteria.
7. Give every indexable page a unique title, meta description, canonical URL, heading hierarchy, and crawlable internal links.
8. Answer important user questions directly in visible content. Keep WebSite, WebPage, BreadcrumbList, and CreativeWork structured data consistent with that content.
9. Set performance budgets for the main image, fonts, JavaScript, Core Web Vitals, and slow-network behavior.
10. Return a testable result rather than general design advice.

Output in this order:
- Goals, assumptions, and success metrics
- User flow and information architecture
- Screen and component specification
- Data model, states, and error recovery
- Responsive and accessibility rules
- SEO, AEO, and structured-data plan
- Implementation plan or code
- Verifiable completion checklist

Starting design tokens

:root {
  --color-primary: #0054A6;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #0054A622;
  --color-danger: #DC2626;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
}

These tokens are a starting point, not a request to clone AhnLab. Validate contrast, hierarchy, density, and brand distinctiveness for your own users.

Expected deliverables

  • Product requirements tied to user outcomes and measurable success criteria
  • Information architecture and the critical end-to-end flow
  • Component contracts covering data, states, actions, and accessibility
  • Mobile, tablet, and desktop adaptation rules
  • SEO/AEO content model, structured data, and internal-link plan
  • Performance budgets, analytics events, tests, and release acceptance criteria

Follow-up prompts

  1. "Take the most important flow and define normal, loading, empty, partial-data, validation-error, server-error, permission-denied, and success states with one consistent data model."
  2. "Convert the specification into semantic, reusable components with realistic English content at 360px, 768px, and 1280px. Include keyboard and screen-reader behavior."
  3. "Audit the result for false confidence, access control, and incident response. Rank failures by severity and give observable evidence, a fix, a verification method, and a completion condition."
  4. "Remove anything that resembles AhnLab's brand or proprietary layout while preserving only the useful information-architecture principle."
  5. "Split the result into engineering tickets with purpose, data requirements, component API, edge cases, accessibility criteria, tests, and dependencies."

Validation checklist

  • ☐ AhnLab is used only as an information-architecture reference.
  • ☐ Project-specific users, problems, features, and metrics replace every placeholder.
  • ☐ The priority and state changes of identities, threats, and policies are explicit.
  • ☐ Trust and recovery paths address false confidence, access control, and incident response.
  • ☐ Empty, delayed, partial, failed, and permission-restricted states are covered.
  • ☐ Keyboard, screen reader, 200% zoom, reduced motion, and contrast can be tested.
  • ☐ The final design has its own product language and visual identity.