@ddmetrics/untitled-ui-make-kit 0.1.0

package/guidelines/Guidelines.md

@@ -0,0 +1,96 @@
+# Untitled UI Make Kit Guidelines
+
+This kit is built for Figma Make. The goal is to generate marketing pages from prompts using **complete Untitled UI templates**, not simplified HTML.
+
+## Critical Import Rule
+
+Always import from `@ddmetrics/untitled-ui-make-kit`.
+
+```tsx
+import {
+  HeaderTemplate,
+  HeroSplitImageTemplate,
+  FeatureGridTemplate,
+  ContentSplitImageTemplate,
+  PricingSectionTemplate,
+  TestimonialSectionTemplate,
+  FAQAccordionTemplate,
+  CTANewsletterTemplate,
+  FooterTemplate,
+} from "@ddmetrics/untitled-ui-make-kit";
+```
+
+Do not install new components with the CLI. Do not recreate Untitled UI layouts from scratch. Do not create simplified cards, buttons, heroes, footers, FAQs, or pricing sections when a template exists.
+
+## How Make Should Handle A Design Prompt
+
+1. Identify the page type. This kit is optimized for landing pages and marketing sites.
+2. Break the prompt into sections: header, hero, services/features, benefits/content, pricing, testimonials, FAQ, CTA/newsletter, footer.
+3. Map each section to a template from `@ddmetrics/untitled-ui-make-kit`.
+4. Fill template props with the user’s content.
+5. Use `@untitledui/icons` for feature and pricing icons.
+6. Keep the template structure intact. Only change props/content.
+7. If a requested section does not map exactly, choose the closest template and adapt content through props.
+
+## Template Layer
+
+Templates are exact Untitled UI section structures made editable through props. Use these for page composition.
+
+| Template | Use For |
+|---|---|
+| `HeaderTemplate` | Top navigation with logo, links, and CTAs |
+| `HeroSplitImageTemplate` | Primary landing hero with copy, CTAs, image, decorative pattern, and file-card overlays |
+| `FeatureGridTemplate` | Services, features, benefits, value props, process steps |
+| `ContentSplitImageTemplate` | Longer brand/story/content blocks with image |
+| `PricingSectionTemplate` | Three-column pricing or plan comparisons |
+| `TestimonialSectionTemplate` | Social proof with quote carousel, avatar, stars, pagination |
+| `FAQAccordionTemplate` | Expandable FAQ with optional support CTA |
+| `CTANewsletterTemplate` | Final CTA, email capture, newsletter, lead form |
+| `FooterTemplate` | Multi-column footer |
+
+## Component Layer
+
+Components are real Untitled UI source components used by templates. Use these only for small custom compositions when no template fits.
+
+Available examples:
+
+| Component | Use For |
+|---|---|
+| `Button` | Actions and links |
+| `Input`, `Form` | Forms and newsletter/email capture |
+| `Avatar` | People, testimonials, support blocks |
+| `Badge`, `BadgeGroup` | Labels, status, pricing callouts |
+| `FeaturedIcon` | Feature icons and visual markers |
+| `PricingTierCardIcon` | Pricing cards inside pricing templates |
+| `FeatureTextFeaturedIconTopCentered` | Individual feature item layouts |
+
+## Template-First Rules
+
+- For complete sections, use templates, not raw components.
+- Raw components are building blocks inside templates.
+- Keep Tailwind classes and responsive structure from the templates.
+- Do not replace templates with generic `div` grids.
+- Do not rename exports. Use the exact export names.
+- Do not use old names like `HeroSplitImage`, `CTASimple`, `Footer`, or `FeaturesSimpleIcons`; use the template names.
+
+## Visual System Rules
+
+- Use semantic Untitled UI tokens: `bg-primary`, `text-primary`, `text-tertiary`, `text-brand-secondary`, `bg-brand-solid`, `border-secondary`.
+- Use `max-w-container` with `px-4 md:px-8`.
+- Preserve section spacing: `py-16 md:py-24`.
+- Use Figtree typography tokens like `text-display-sm`, `text-display-md`, `text-display-lg`, and `text-xl`.
+- Prefer brand CTAs with `Button size="xl"` or `Button size="md"` depending on context.
+
+## Content Rules
+
+- Spanish prompts should produce Spanish content.
+- Keep headlines short and specific.
+- Use 3 to 6 features for `FeatureGridTemplate`.
+- Use 3 pricing plans for `PricingSectionTemplate`.
+- Use 4 to 8 FAQ items for `FAQAccordionTemplate`.
+- Use real image URLs with descriptive alt text when the prompt asks for imagery.
+
+## Supporting Docs
+
+- `section-mapping.md` maps prompt sections to templates and prop shapes.
+- `component-inventory.md` lists the current kit exports.

package/guidelines/component-inventory.md

@@ -0,0 +1,40 @@
+# Component Inventory
+
+Use this inventory to avoid inventing component names. Import everything from `@ddmetrics/untitled-ui-make-kit`.
+
+## Templates
+
+Templates are the preferred API for Figma Make prompts.
+
+| Export | Purpose |
+|---|---|
+| `HeaderTemplate` | Navigation header |
+| `HeroSplitImageTemplate` | Main split hero |
+| `FeatureGridTemplate` | Features, services, benefits, process |
+| `ContentSplitImageTemplate` | Long content with side image |
+| `PricingSectionTemplate` | Pricing cards |
+| `TestimonialSectionTemplate` | Testimonial carousel |
+| `FAQAccordionTemplate` | FAQ accordion |
+| `CTANewsletterTemplate` | CTA/newsletter form |
+| `FooterTemplate` | Multi-column footer |
+
+## Real Components
+
+These are real Untitled UI components used by templates or small custom compositions.
+
+| Export | Purpose |
+|---|---|
+| `Button` | Buttons and links |
+| `Input`, `InputBase`, `TextField` | Inputs |
+| `Form` | Form wrapper |
+| `Avatar` | Avatars |
+| `Badge`, `BadgeGroup` | Badges and callouts |
+| `FeaturedIcon` | Icon container |
+| `UntitledLogo`, `UntitledLogoMinimal` | Logos |
+| `FeatureTextFeaturedIconTopCentered` | Feature item structure |
+| `PricingTierCardIcon` | Pricing card structure |
+| `CheckItemText` | Check-list pricing item |
+
+## Rule
+
+If a prompt asks for a full page section, use a template. Use raw components only inside a custom section when no template exists.

package/guidelines/section-mapping.md

@@ -0,0 +1,131 @@
+# Section-to-Template Mapping
+
+All complete sections must use templates from `@ddmetrics/untitled-ui-make-kit`. Templates preserve the exact Untitled UI visual structure and expose editable props.
+
+## Import Pattern
+
+```tsx
+import {
+  HeaderTemplate,
+  HeroSplitImageTemplate,
+  FeatureGridTemplate,
+  ContentSplitImageTemplate,
+  PricingSectionTemplate,
+  TestimonialSectionTemplate,
+  FAQAccordionTemplate,
+  CTANewsletterTemplate,
+  FooterTemplate,
+} from "@ddmetrics/untitled-ui-make-kit";
+import { Building, Package, Plane, Shield, Ship, Truck01 } from "@untitledui/icons";
+```
+
+## Mapping
+
+| Prompt Section | Template | Notes |
+|---|---|---|
+| Header, navigation, navbar | `HeaderTemplate` | Use logo label, nav links, primary/secondary CTAs |
+| Hero, main intro, landing intro | `HeroSplitImageTemplate` | Use for most B2B/service/marketing pages |
+| Services, features, benefits, process | `FeatureGridTemplate` | Use 3 to 6 items with `@untitledui/icons` |
+| About, why us, detailed value proposition | `ContentSplitImageTemplate` | Use when section needs longer copy and image |
+| Pricing, plans, packages | `PricingSectionTemplate` | Use 3 plans when possible |
+| Testimonials, social proof, reviews | `TestimonialSectionTemplate` | Use 1 to 3 testimonials |
+| FAQ, questions | `FAQAccordionTemplate` | Use 4 to 8 items |
+| Final CTA, newsletter, email capture | `CTANewsletterTemplate` | Use at page bottom for lead capture |
+| Footer | `FooterTemplate` | Use 2 to 6 columns |
+
+## Example Landing Page
+
+```tsx
+import {
+  HeaderTemplate,
+  HeroSplitImageTemplate,
+  FeatureGridTemplate,
+  ContentSplitImageTemplate,
+  FAQAccordionTemplate,
+  CTANewsletterTemplate,
+  FooterTemplate,
+} from "@ddmetrics/untitled-ui-make-kit";
+import { Building, Package, Plane, Shield, Ship, Truck01 } from "@untitledui/icons";
+
+export default function App() {
+  return (
+    <>
+      <HeaderTemplate
+        logoLabel="CKM Logística"
+        navItems={[
+          { label: "Servicios", href: "#servicios" },
+          { label: "Beneficios", href: "#beneficios" },
+          { label: "FAQ", href: "#faq" },
+        ]}
+        primaryCta={{ label: "Cotizar", href: "#contacto" }}
+      />
+
+      <HeroSplitImageTemplate
+        eyebrow="Logística internacional"
+        headline="Soluciones logísticas confiables para mover tu negocio"
+        description="Coordinamos transporte marítimo, aéreo y terrestre con seguimiento claro y atención personalizada."
+        primaryCta={{ label: "Solicitar cotización", href: "#contacto" }}
+        secondaryCta={{ label: "Ver servicios", href: "#servicios" }}
+        image={{
+          src: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1200",
+          alt: "Centro logístico con contenedores",
+        }}
+      />
+
+      <FeatureGridTemplate
+        eyebrow="Servicios"
+        headline="Cobertura completa para tu operación"
+        description="Elige los servicios que necesitas y nosotros coordinamos la cadena completa."
+        features={[
+          { title: "Carga marítima", description: "FCL, LCL y coordinación portuaria.", icon: Ship },
+          { title: "Carga aérea", description: "Envíos urgentes y carga de alto valor.", icon: Plane },
+          { title: "Transporte terrestre", description: "Recolección y entrega nacional.", icon: Truck01 },
+          { title: "Despacho aduanal", description: "Documentación y cumplimiento.", icon: Building },
+          { title: "Seguro de carga", description: "Protección para tus mercancías.", icon: Shield },
+          { title: "Almacenaje", description: "Soporte operativo y distribución.", icon: Package },
+        ]}
+      />
+
+      <ContentSplitImageTemplate
+        eyebrow="Por qué elegirnos"
+        title="Atención personalizada con visibilidad de punta a punta"
+        description="Diseñamos cada operación según origen, destino, tiempos y presupuesto."
+        image={{
+          src: "https://images.unsplash.com/photo-1553413077-190dd305871c?w=1200",
+          alt: "Equipo revisando operación logística",
+        }}
+      />
+
+      <FAQAccordionTemplate
+        headline="Preguntas frecuentes"
+        description="Respuestas rápidas para planear tu siguiente embarque."
+        items={[
+          { question: "¿Manejan importación y exportación?", answer: "Sí, coordinamos operaciones internacionales de origen a destino." },
+          { question: "¿Pueden cotizar diferentes rutas?", answer: "Sí, comparamos alternativas según costo, tiempo y nivel de servicio." },
+          { question: "¿Incluyen despacho aduanal?", answer: "Podemos coordinar documentación y despacho con agentes especializados." },
+          { question: "¿Dan seguimiento al envío?", answer: "Sí, entregamos visibilidad y actualizaciones durante el proceso." },
+        ]}
+        supportTitle="¿Necesitas una cotización?"
+        supportDescription="Comparte origen, destino y tipo de carga para asesorarte."
+        supportCta={{ label: "Contactar equipo", href: "#contacto" }}
+      />
+
+      <CTANewsletterTemplate
+        headline="Optimiza tu siguiente operación logística"
+        description="Déjanos tus datos y un asesor te contactará."
+        placeholder="Tu correo empresarial"
+        buttonLabel="Solicitar contacto"
+      />
+
+      <FooterTemplate
+        columns={[
+          { label: "Servicios", items: [{ label: "Marítimo", href: "#" }, { label: "Aéreo", href: "#" }, { label: "Terrestre", href: "#" }] },
+          { label: "Empresa", items: [{ label: "Nosotros", href: "#" }, { label: "Contacto", href: "#" }] },
+          { label: "Legal", items: [{ label: "Privacidad", href: "#" }, { label: "Términos", href: "#" }] },
+        ]}
+        copyright="© 2026 CKM Logística. Todos los derechos reservados."
+      />
+    </>
+  );
+}
+```

package/guidelines/styles.md

@@ -0,0 +1,87 @@
+# Style Guidelines
+
+## Layout Principles
+
+- **Max content width:** 1280px
+- **Container padding:** 16px mobile, 32px desktop
+- **Paragraph max width:** 720px
+- **Grid:** Tailwind CSS grid/flex. Sections full-width with centered max-width container.
+- **Responsive:** Mobile-first. Horizontal on desktop, vertical on mobile.
+
+## Spacing Scale (base unit: 4px)
+
+| Use case | Token | px |
+|---|---|---|
+| Tight inline gaps | `--spacing-xs` | 4 |
+| Icon-to-text gap | `--spacing-md` | 8 |
+| Element padding | `--spacing-xl` | 16 |
+| Card internal padding | `--spacing-3xl` | 24 |
+| Section internal spacing | `--spacing-5xl` | 40 |
+| Between sections | `--spacing-9xl` | 96 |
+| Hero/footer padding | `--spacing-11xl` | 160 |
+
+## Typography (Font: Figtree)
+
+| Element | Size | Weight | Class |
+|---|---|---|---|
+| H1 hero | 48px | Bold 700 | `.display-lg-bold` |
+| H2 section | 36px | Semibold 600 | `.display-md-semibold` |
+| H3 card title | 24px | Semibold 600 | `.display-xs-semibold` |
+| H4 subtitle | 18px | Semibold 600 | `.text-lg-semibold` |
+| Body | 16px | Regular 400 | `.text-md-regular` |
+| Body small | 14px | Regular 400 | `.text-sm-regular` |
+| Caption | 12px | Medium 500 | `.text-xs-medium` |
+| Button | 16px | Medium 500 | `.text-md-medium` |
+| Overline | 14px | Semibold 600 | `.text-sm-semibold` |
+
+## Border Radius
+
+| Element | Token | px |
+|---|---|---|
+| Cards | `--radius-xl` | 12 |
+| Buttons | `--radius-md` | 8 |
+| Inputs | `--radius-sm` | 6 |
+| Badges/pills | `--radius-full` | 9999 |
+
+## Color Usage
+
+| Context | Token |
+|---|---|
+| Page bg | `--background` white |
+| Alt section bg | `bg-secondary` #FAFAFA |
+| Brand section bg | `bg-brand-section` #4D369D |
+| Primary buttons | `--primary` purple |
+| Heading text | `text-primary` #181D27 |
+| Body text | `--foreground` #414651 |
+| Muted text | `--muted-foreground` #535862 |
+
+## Responsive (Tailwind)
+
+`sm:` 640px, `md:` 768px, `lg:` 1024px, `xl:` 1280px
+
+## Section Pattern
+
+Do not write raw section HTML when a template exists. Use section templates from `@ddmetrics/untitled-ui-make-kit` and preserve their internal structure.
+
+Template sections already use the correct pattern:
+
+- `bg-primary`
+- `py-16 md:py-24`
+- `mx-auto max-w-container px-4 md:px-8`
+- mobile-first responsive grids
+- Untitled UI text tokens like `text-display-sm`, `text-display-md`, `text-primary`, `text-tertiary`
+
+Alternate section rhythm: primary background, secondary/content section, primary background, CTA/newsletter, footer.
+<!--
+
+Style guidelines teach Make what styles are available and how to use them correctly.
+
+Focus on visual patterns and spacing. For example:
+* Layout principles - Grid systems, breakpoints, container widths
+* Spacing scale - "Use 4px base unit: 4, 8, 16, 24, 32, 48, 64"
+* Typography hierarchy - Specific font sizes, weights, line heights for h1-h6, body, captions
+* Border radius system - "Cards: 12px, Buttons: 8px, Inputs: 6px"
+* Responsive behavior - "Stack horizontally on desktop, vertically on mobile"
+
+For more tips, check our guide:
+https://developers.figma.com/docs/code/write-design-system-guidelines

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@ddmetrics/untitled-ui-make-kit",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Untitled UI marketing templates packaged for Figma Make kits.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/untitled-ui-make-kit.css",
+  "files": [
+    "dist",
+    "guidelines",
+    "README.md",
+    "ATTRIBUTIONS.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/untitled-ui-make-kit.css"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@react-stately/utils": "^3.12.0",
+    "@untitledui/file-icons": "^0.0.9",
+    "@untitledui/icons": "^0.0.22",
+    "motion": "^12.40.0",
+    "react-aria": "^3.48.0",
+    "react-aria-components": "^1.17.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "1.3.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.1.12",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "4.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "4.1.12",
+    "typescript": "^6.0.3",
+    "vite": "^6.4.2"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "6.4.2"
+    }
+  }
+}