# Does Hallmark Generate UI for Single Components Like Buttons or Cards? > Discover if Hallmark generates UI for single components. Hallmark creates complete theme aware web pages as self contained HTML CSS bundles not individual UI elements. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: faq - Published: 2026-07-18 --- **No, Hallmark does not generate UI for single components like buttons or cards; it creates complete, theme-aware web pages as self-contained HTML and CSS bundles.** Hallmark is an AI **design skill** developed in the `Nutlope/hallmark` repository that generates entire web interfaces rather than isolated interface elements. Unlike component library generators, Hallmark operates on **page-level briefs** to produce full HTML documents with cohesive design systems, running slop-test gates to ensure quality across the complete output. ## How Hallmark's Page-Level Architecture Works ### The Four Verbs and Target Briefs According to [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), Hallmark defines four verbs—`default`, `audit`, `redesign`, and `study`—that operate exclusively on **target briefs** describing complete sites or applications. The `default` verb (`hallmark `) triggers a "Build new UI" workflow that selects a macro-structure, applies one of twenty themes, runs slop-test gates, and emits a full HTML document. None of these verbs accept a component name as an argument. ### Macro-Structures Over Components The layout logic resides in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md), which defines **page-level layout patterns** rather than component-level snippets. The [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) file specifies theme parameters that apply holistically to the entire page fingerprint, ensuring cohesive typography and spacing across the full document. ## Why Hallmark Excludes Single-Component Generation ### Design-First Philosophy Hallmark's methodology prioritizes avoiding "AI-generated-look-alike" templates by crafting a unique design fingerprint for each output. This requires maintaining holistic relationships between typography, color, spacing, and layout—constraints that become meaningless when UI elements like buttons or cards are isolated from their page context. ### Self-Contained Output Format The skill generates **self-contained HTML and CSS bundles**, as demonstrated by the fully-rendered examples in `site/_tests/` (e.g., [`site/_tests/04-meridian-manifesto/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/04-meridian-manifesto/index.html)). While [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) contains rules for buttons and cards, these stylesheets support complete pages only; there is no module system for exporting individual components. ## Generating Full Pages vs. Single Components When executing Hallmark commands, you receive entire page architectures: ```bash # Creates a complete travel booking site with all UI elements hallmark wayfare ``` This generates a directory containing [`index.html`](https://github.com/Nutlope/hallmark/blob/main/index.html), [`style.css`](https://github.com/Nutlope/hallmark/blob/main/style.css), and associated assets. The resulting markup includes typical UI elements—such as `` or card layouts—but Hallmark cannot restrict output to these elements alone. To reuse a specific component, you must manually extract the markup and corresponding CSS from the generated page files. ## Summary - Hallmark is architected as a **design skill** for complete web pages, not a component generator. - The four verbs (`default`, `audit`, `redesign`, `study`) process **full-page briefs** defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md). - Configuration files in `skills/hallmark/references/` define **macro-structures** for entire layouts and twenty distinct themes. - Output appears as self-contained HTML documents in directories like `site/_tests/`, not as importable component modules. - **Extraction is manual**: You must copy component code from generated full-page outputs. ## Frequently Asked Questions ### Can Hallmark generate a standalone button component for my React project? No, Hallmark does not support generating standalone components. It produces complete HTML pages in `site/_tests/` style bundles. You would need to manually copy the button markup and CSS from a generated page into your React components. ### Does Hallmark provide a component library or design tokens? Hallmark does not export a component library. While [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css) contains rules for buttons and cards, these are tightly coupled to the full-page themes defined in [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md). There are no standalone design tokens or component APIs. ### Can I use Hallmark to redesign just the navigation bar of my existing site? No. The `redesign` verb "throws out the structure, keeps copy + IA + brand, and rebuilds with a different fingerprint" according to the source code. It operates on the entire page brief at once, not specific sections or components like a navigation bar. ### How can I get individual UI components from Hallmark output? You must manually extract them. Run `hallmark ` to generate a full page, then inspect the resulting HTML in the output directory (similar to [`site/_tests/04-meridian-manifesto/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/04-meridian-manifesto/index.html)) and copy the desired component markup and associated CSS from [`site/css/components.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/components.css).