popular-web-designs

---
name: popular-web-designs
description: 54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
version: 1.0.0
author: Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md)
license: MIT
tags: [design, css, html, ui, web-development, design-systems, templates]
platforms: [linux, macos, windows]
triggers:
  - build a page that looks like
  - make it look like stripe
  - design like linear
  - vercel style
  - create a UI
  - web design
  - landing page
  - dashboard design
  - website styled like
---

# Popular Web Designs

54 real-world design systems ready for use when generating HTML/CSS. Each template captures a
site's complete visual language: color palette, typography hierarchy, component styles, spacing
system, shadows, responsive behavior, and practical agent prompts with exact CSS values.

## Related design skills

- **`claude-design`** — use for the design *process and taste* (scoping a brief,
  producing variants, verifying a local HTML artifact, avoiding AI-design slop).
  Pair it with this skill when the user wants a thoughtfully-designed page styled
  after a known brand: `claude-design` drives the workflow, this skill supplies
  the visual vocabulary.
- **`design-md`** — use when the deliverable is a formal DESIGN.md token spec
  file, not a rendered artifact.

## How to Use

1. Pick a design from the catalog below
2. Load it: `skill_view(name="popular-web-designs", file_path="templates/<site>.md")`
3. Use the design tokens and component specs when generating HTML
4. Pair with the `generative-widgets` skill to serve the result via cloudflared tunnel

Each template includes a **Hermes Implementation Notes** block at the top with:
- CDN font substitute and Google Fonts `<link>` tag (ready to paste)
- CSS font-family stacks for primary and monospace
- Reminders to use `write_file` for HTML creation and `browser_vision` for verification

## HTML Generation Pattern

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- Paste the Google Fonts <link> from the template's Hermes notes -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  <!-- Build using component specs from the template -->
</body>
</html>
```

Write the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),
and verify the result with `browser_vision` to confirm visual accuracy.

## Font Substitution Reference

Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts
substitute that preserves the design's character. Common mappings:

| Proprietary Font | CDN Substitute | Character |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |
| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |
| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |
| Berkeley Mono | JetBrains Mono | Technical monospace |
| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |
| Circular (Spotify) | DM Sans | Geometric, warm |
| figmaSans | Inter | Clean humanist |
| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |
| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |
| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |
| UberMove | DM Sans | Bold, tight |
| HashiCorp Sans | Inter | Enterprise, neutral |
| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |
| Rubik (Sentry) | Rubik | Available on Google Fonts |

When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no
substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3
for sohne-var), follow the template's weight, size, and letter-spacing values closely —
those carry more visual identity than the specific font face.

## Design Catalog

### AI & Machine Learning

| Template | Site | Style |
|---|---|---|
| `claude.md` | Anthropic Claude | Warm terracotta accent, clean editorial layout |
| `cohere.md` | Cohere | Vibrant gradients, data-rich dashboard aesthetic |
| `elevenlabs.md` | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
| `minimax.md` | Minimax | Bold dark interface with neon accents |
| `mistral.ai.md` | Mistral AI | French-engineered minimalism, purple-toned |
| `ollama.md` | Ollama | Terminal-first, monochrome simplicity |
| `opencode.ai.md` | OpenCode AI | Developer-centric dark theme, full monospace |
| `replicate.md` | Replicate | Clean white canvas, code-forward |
| `runwayml.md` | RunwayML | Cinematic dark UI, media-rich layout |
| `together.ai.md` | Together AI | Technical, blueprint-style design |
| `voltagent.md` | VoltAgent | Void-black canvas, emerald accent, terminal-native |
| `x.ai.md` | xAI | Stark monochrome, futuristic minimalism, full monospace |

### Developer Tools & Platforms

| Template | Site | Style |
|---|---|---|
| `cursor.md` | Cursor | Sleek dark interface, gradient accents |
| `expo.md` | Expo | Dark theme, tight letter-spacing, code-centric |
| `linear.app.md` | Linear | Ultra-minimal dark-mode, precise, purple accent |
| `lovable.md` | Lovable | Playful gradients, friendly dev aesthetic |
| `mintlify.md` | Mintlify | Clean, green-accented, reading-optimized |
| `posthog.md` | PostHog | Playful branding, developer-friendly dark UI |
| `raycast.md` | Raycast | Sleek dark chrome, vibrant gradient accents |
| `resend.md` | Resend | Minimal dark theme, monospace accents |
| `sentry.md` | Sentry | Dark dashboard, data-dense, pink-purple accent |
| `supabase.md` | Supabase | Dark emerald theme, code-first developer tool |
| `superhuman.md` | Superhuman | Premium dark UI, keyboard-first, purple glow |
| `vercel.md` | Vercel | Black and white precision, Geist font system |
| `warp.md` | Warp | Dark IDE-like interface, block-based command UI |
| `zapier.md` | Zapier | Warm orange, friendly illustration-driven |

### Infrastructure & Cloud

| Template | Site | Style |
|---|---|---|
| `clickhouse.md` | ClickHouse | Yellow-accented, technical documentation style |
| `composio.md` | Composio | Modern dark with colorful integration icons |
| `hashicorp.md` | HashiCorp | Enterprise-clean, black and white |
| `mongodb.md` | MongoDB | Green leaf branding, developer documentation focus |
| `sanity.md` | Sanity | Red accent, content-first editorial layout |
| `stripe.md` | Stripe | Signature purple gradients, weight-300 elegance |

### Design & Productivity

| Template | Site | Style |
|---|---|---|
| `airtable.md` | Airtable | Colorful, friendly, structured data aesthetic |
| `cal.md` | Cal.com | Clean neutral UI, developer-oriented simplicity |
| `clay.md` | Clay | Organic shapes, soft gradients, art-directed layout |
| `figma.md` | Figma | Vibrant multi-color, playful yet professional |
| `framer.md` | Framer | Bold black and blue, motion-first, design-forward |
| `intercom.md` | Intercom | Friendly blue palette, conversational UI patterns |
| `miro.md` | Miro | Bright yellow accent, infinite canvas aesthetic |
| `notion.md` | Notion | Warm minimalism, serif headings, soft surfaces |
| `pinterest.md` | Pinterest | Red accent, masonry grid, image-first layout |
| `webflow.md` | Webflow | Blue-accented, polished marketing site aesthetic |

### Fintech & Crypto

| Template | Site | Style |
|---|---|---|
| `coinbase.md` | Coinbase | Clean blue identity, trust-focused, institutional feel |
| `kraken.md` | Kraken | Purple-accented dark UI, data-dense dashboards |
| `revolut.md` | Revolut | Sleek dark interface, gradient cards, fintech precision |
| `wise.md` | Wise | Bright green accent, friendly and clear |

### Enterprise & Consumer

| Template | Site | Style |
|---|---|---|
| `airbnb.md` | Airbnb | Warm coral accent, photography-driven, rounded UI |
| `apple.md` | Apple | Premium white space, SF Pro, cinematic imagery |
| `bmw.md` | BMW | Dark premium surfaces, precise engineering aesthetic |
| `ibm.md` | IBM | Carbon design system, structured blue palette |
| `nvidia.md` | NVIDIA | Green-black energy, technical power aesthetic |
| `spacex.md` | SpaceX | Stark black and white, full-bleed imagery, futuristic |
| `spotify.md` | Spotify | Vibrant green on dark, bold type, album-art-driven |
| `uber.md` | Uber | Bold black and white, tight type, urban energy |

## Choosing a Design

Match the design to the content:

- **Developer tools / dashboards:** Linear, Vercel, Supabase, Raycast, Sentry
- **Documentation / content sites:** Mintlify, Notion, Sanity, MongoDB
- **Marketing / landing pages:** Stripe, Framer, Apple, SpaceX
- **Dark mode UIs:** Linear, Cursor, ElevenLabs, Warp, Superhuman
- **Light / clean UIs:** Vercel, Stripe, Notion, Cal.com, Replicate
- **Playful / friendly:** PostHog, Figma, Lovable, Zapier, Miro
- **Premium / luxury:** Apple, BMW, Stripe, Superhuman, Revolut
- **Data-dense / dashboards:** Sentry, Kraken, Cohere, ClickHouse
- **Monospace / terminal aesthetic:** Ollama, OpenCode, x.ai, VoltAgent


# Design System: Notion

> **Hermes Agent — Implementation Notes**
>
> The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes:
> - **Primary:** `Inter` | **Mono:** `system monospace stack`
> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
> ```html
> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
> ```
> Use `write_file` to create HTML, serve via `generative-widgets` skill (cloudflared tunnel).
> Verify visual accuracy with `browser_vision` after generating.

## 1. Visual Theme & Atmosphere

Notion's website embodies the philosophy of the tool itself: a blank canvas that gets out of your way. The design system is built on warm neutrals rather than cold grays, creating a distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page canvas is pure white (`#ffffff`) but the text isn't pure black -- it's a warm near-black (`rgba(0,0,0,0.95)`) that softens the reading experience imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.

The custom NotionInter font (a modified Inter) is the backbone of the system. At display sizes (64px), it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical systems: 400 for body, 500 for UI elements, 600 for semi-bold labels, and 700 for display headings. OpenType features `"lnum"` (lining numerals) and `"locl"` (localized forms) are enabled on larger text, adding typographic sophistication that rewards close reading.

What makes Notion's visual language distinctive is its border philosophy. Rather than heavy borders or shadows, Notion uses ultra-thin `1px solid rgba(0,0,0,0.1)` borders -- borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer stacks with cumulative opacity never exceeding 0.05, creating depth that's felt rather than seen.

**Key Characteristics:**
- NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px)
- Warm neutral palette: grays carry yellow-brown undertones (`#f6f5f4` warm white, `#31302e` warm dark)
- Near-black text via `rgba(0,0,0,0.95)` -- not pure black, creating micro-warmth
- Ultra-thin borders: `1px solid rgba(0,0,0,0.1)` throughout -- whisper-weight division
- Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth
- Notion Blue (`#0075de`) as the singular accent color for CTAs and interactive elements
- Pill badges (9999px radius) with tinted blue backgrounds for status indicators
- 8px base spacing unit with an organic, non-rigid scale

## 2. Color Palette & Roles

### Primary
- **Notion Black** (`rgba(0,0,0,0.95)` / `#000000f2`): Primary text, headings, body copy. The 95% opacity softens pure black without sacrificing readability.
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on blue.
- **Notion Blue** (`#0075de`): Primary CTA, link color, interactive accent -- the only saturated color in the core UI chrome.

### Brand Secondary
- **Deep Navy** (`#213183`): Secondary brand color, used sparingly for emphasis and dark feature sections.
- **Active Blue** (`#005bab`): Button active/pressed state -- darker variant of Notion Blue.

### Warm Neutral Scale
- **Warm White** (`#f6f5f4`): Background surface tint, section alternation, subtle card fill. The yellow undertone is key.
- **Warm Dark** (`#31302e`): Dark surface background, dark section text. Warmer than standard grays.
- **Warm Gray 500** (`#615d59`): Secondary text, descriptions, muted labels.
- **Warm Gray 300** (`#a39e98`): Placeholder text, disabled states, caption text.

### Semantic Accent Colors
- **Teal** (`#2a9d99`): Success states, positive indicators.
- **Green** (`#1aae39`): Confirmation, completion badges.
- **Orange** (`#dd5b00`): Warning states, attention indicators.
- **Pink** (`#ff64c8`): Decorative accent, feature highlights.
- **Purple** (`#391c57`): Premium features, deep accents.
- **Brown** (`#523410`): Earthy accent, warm feature sections.

### Interactive
- **Link Blue** (`#0075de`): Primary link color with underline-on-hover.
- **Link Light Blue** (`#62aef0`): Lighter link variant for dark backgrounds.
- **Focus Blue** (`#097fe8`): Focus ring on interactive elements.
- **Badge Blue Bg** (`#f2f9ff`): Pill badge background, tinted blue surface.
- **Badge Blue Text** (`#097fe8`): Pill badge text, darker blue for readability.

### Shadows & Depth
- **Card Shadow** (`rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`): Multi-layer card elevation.
- **Deep Shadow** (`rgba(0,0,0,0.01) 0px 1px 3px, rgba(0,0,0,0.02) 0px 3px 7px, rgba(0,0,0,0.02) 0px 7px 15px, rgba(0,0,0,0.04) 0px 14px 28px, rgba(0,0,0,0.05) 0px 23px 52px`): Five-layer deep elevation for modals and featured content.
- **Whisper Border** (`1px solid rgba(0,0,0,0.1)`): Standard division border -- cards, dividers, sections.

## 3. Typography Rules

### Font Family
- **Primary**: `NotionInter`, with fallbacks: `Inter, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, Segoe UI Emoji, Segoe UI Symbol`
- **OpenType Features**: `"lnum"` (lining numerals) and `"locl"` (localized forms) enabled on display and heading text.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | NotionInter | 64px (4.00rem) | 700 | 1.00 (tight) | -2.125px | Maximum compression, billboard headlines |
| Display Secondary | NotionInter | 54px (3.38rem) | 700 | 1.04 (tight) | -1.875px | Secondary hero, feature headlines |
| Section Heading | NotionInter | 48px (3.00rem) | 700 | 1.00 (tight) | -1.5px | Feature section titles, with `"lnum"` |
| Sub-heading Large | NotionInter | 40px (2.50rem) | 700 | 1.50 | normal | Card headings, feature sub-sections |
| Sub-heading | NotionInter | 26px (1.63rem) | 700 | 1.23 (tight) | -0.625px | Section sub-titles, content headers |
| Card Title | NotionInter | 22px (1.38rem) | 700 | 1.27 (tight) | -0.25px | Feature cards, list titles |
| Body Large | NotionInter | 20px (1.25rem) | 600 | 1.40 | -0.125px | Introductions, feature descriptions |
| Body | NotionInter | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
| Body Medium | NotionInter | 16px (1.00rem) | 500 | 1.50 | normal | Navigation, emphasized UI text |
| Body Semibold | NotionInter | 16px (1.00rem) | 600 | 1.50 | normal | Strong labels, active states |
| Body Bold | NotionInter | 16px (1.00rem) | 700 | 1.50 | normal | Headlines at body size |
| Nav / Button | NotionInter | 15px (0.94rem) | 600 | 1.33 | normal | Navigation links, button text |
| Caption | NotionInter | 14px (0.88rem) | 500 | 1.43 | normal | Metadata, secondary labels |
| Caption Light | NotionInter | 14px (0.88rem) | 400 | 1.43 | normal | Body captions, descriptions |
| Badge | NotionInter | 12px (0.75rem) | 600 | 1.33 | 0.125px | Pill badges, tags, status labels |
| Micro Label | NotionInter | 12px (0.75rem) | 400 | 1.33 | 0.125px | Small metadata, timestamps |

### Principles
- **Compression at scale**: NotionInter at display sizes uses -2.125px letter-spacing at 64px, progressively relaxing to -0.625px at 26px and normal at 16px. The compression creates density at headlines while maintaining readability at body sizes.
- **Four-weight system**: 400 (body/reading), 500 (UI/interactive), 600 (emphasis/navigation), 700 (headings/display). The broader weight range compared to most systems allows nuanced hierarchy.
- **Warm scaling**: Line height tightens as size increases -- 1.50 at body (16px), 1.23-1.27 at sub-headings, 1.00-1.04 at display. This creates denser, more impactful headlines.
- **Badge micro-tracking**: The 12px badge text uses positive letter-spacing (0.125px) -- the only positive tracking in the system, creating wider, more legible small text.

## 4. Component Stylings

### Buttons

**Primary Blue**
- Background: `#0075de` (Notion Blue)
- Text: `#ffffff`
- Padding: 8px 16px
- Radius: 4px (subtle)
- Border: `1px solid transparent`
- Hover: background darkens to `#005bab`
- Active: scale(0.9) transform
- Focus: `2px solid` focus outline, `var(--shadow-level-200)` shadow
- Use: Primary CTA ("Get Notion free", "Try it")

**Secondary / Tertiary**
- Background: `rgba(0,0,0,0.05)` (translucent warm gray)
- Text: `#000000` (near-black)
- Padding: 8px 16px
- Radius: 4px
- Hover: text color shifts, scale(1.05)
- Active: scale(0.9) transform
- Use: Secondary actions, form submissions

**Ghost / Link Button**
- Background: transparent
- Text: `rgba(0,0,0,0.95)`
- Decoration: underline on hover
- Use: Tertiary actions, inline links

**Pill Badge Button**
- Background: `#f2f9ff` (tinted blue)
- Text: `#097fe8`
- Padding: 4px 8px
- Radius: 9999px (full pill)
- Font: 12px weight 600
- Use: Status badges, feature labels, "New" tags

### Cards & Containers
- Background: `#ffffff`
- Border: `1px solid rgba(0,0,0,0.1)` (whisper border)
- Radius: 12px (standard cards), 16px (featured/hero cards)
- Shadow: `rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.84688px, rgba(0,0,0,0.02) 0px 0.8px 2.925px, rgba(0,0,0,0.01) 0px 0.175px 1.04062px`
- Hover: subtle shadow intensification
- Image cards: 12px top radius, image fills top half

### Inputs & Forms
- Background: `#ffffff`
- Text: `rgba(0,0,0,0.9)`
- Border: `1px solid #dddddd`
- Padding: 6px
- Radius: 4px
- Focus: blue outline ring
- Placeholder: warm gray `#a39e98`

### Navigation
- Clean horizontal nav on white, not sticky
- Brand logo left-aligned (33x34px icon + wordmark)
- Links: NotionInter 15px weight 500-600, near-black text
- Hover: color shift to `var(--color-link-primary-text-hover)`
- CTA: blue pill button ("Get Notion free") right-aligned
- Mobile: hamburger menu collapse
- Product dropdowns with multi-level categorized menus

### Image Treatment
- Product screenshots with `1px solid rgba(0,0,0,0.1)` border
- Top-rounded images: `12px 12px 0px 0px` radius
- Dashboard/workspace preview screenshots dominate feature sections
- Warm gradient backgrounds behind hero illustrations (decorative character illustrations)

### Distinctive Components

**Feature Cards with Illustrations**
- Large illustrative headers (The Great Wave, product UI screenshots)
- 12px radius card with whisper border
- Title at 22px weight 700, description at 16px weight 400
- Warm white (`#f6f5f4`) background variant for alternating sections

**Trust Bar / Logo Grid**
- Company logos (trusted teams section) in their brand colors
- Horizontal scroll or grid layout with team counts
- Metric display: large number + description pattern

**Metric Cards**
- Large number display (e.g., "$4,200 ROI")
- NotionInter 40px+ weight 700 for the metric
- Description below in warm gray body text
- Whisper-bordered card container

## 5. Layout Principles

### Spacing System
- Base unit: 8px
- Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 11px, 12px, 14px, 16px, 24px, 32px
- Non-rigid organic scale with fractional values (5.6px, 6.4px) for micro-adjustments

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with generous top padding (80-120px)
- Feature sections: 2-3 column grids for cards
- Full-width warm white (`#f6f5f4`) section backgrounds for alternation
- Code/dashboard screenshots as contained with whisper border

### Whitespace Philosophy
- **Generous vertical rhythm**: 64-120px between major sections. Notion lets content breathe with vast vertical padding.
- **Warm alternation**: White sections alternate with warm white (`#f6f5f4`) sections, creating gentle visual rhythm without harsh color breaks.
- **Content-first density**: Body text blocks are compact (line-height 1.50) but surrounded by ample margin, creating islands of readable content in a sea of white space.

### Border Radius Scale
- Micro (4px): Buttons, inputs, functional interactive elements
- Subtle (5px): Links, list items, menu items
- Standard (8px): Small cards, containers, inline elements
- Comfortable (12px): Standard cards, feature containers, image tops
- Large (16px): Hero cards, featured content, promotional blocks
- Full Pill (9999px): Badges, pills, status indicators
- Circle (100%): Tab indicators, avatars

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Whisper (Level 1) | `1px solid rgba(0,0,0,0.1)` | Standard borders, card outlines, dividers |
| Soft Card (Level 2) | 4-layer shadow stack (max opacity 0.04) | Content cards, feature blocks |
| Deep Card (Level 3) | 5-layer shadow stack (max opacity 0.05, 52px blur) | Modals, featured panels, hero elements |
| Focus (Accessibility) | `2px solid var(--focus-color)` outline | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Notion's shadow system uses multiple layers with extremely low individual opacity (0.01 to 0.05) that accumulate into soft, natural-looking elevation. The 4-layer card shadow spans from 1.04px to 18px blur, creating a gradient of depth rather than a single hard shadow. The 5-layer deep shadow extends to 52px blur at 0.05 opacity, producing ambient occlusion that feels like natural light rather than computer-generated depth. This layered approach makes elements feel embedded in the page rather than floating above it.

### Decorative Depth
- Hero section: decorative character illustrations (playful, hand-drawn style)
- Section alternation: white to warm white (`#f6f5f4`) background shifts
- No hard section borders -- separation comes from background color changes and spacing

## 7. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <400px | Tight single column, minimal padding |
| Mobile | 400-600px | Standard mobile, stacked layout |
| Tablet Small | 600-768px | 2-column grids begin |
| Tablet | 768-1080px | Full card grids, expanded padding |
| Desktop Small | 1080-1200px | Standard desktop layout |
| Desktop | 1200-1440px | Full layout, maximum content width |
| Large Desktop | >1440px | Centered, generous margins |

### Touch Targets
- Buttons use comfortable padding (8px-16px vertical)
- Navigation links at 15px with adequate spacing
- Pill badges have 8px horizontal padding for tap targets
- Mobile menu toggle uses standard hamburger button

### Collapsing Strategy
- Hero: 64px display -> scales to 40px -> 26px on mobile, maintains proportional letter-spacing
- Navigation: horizontal links + blue CTA -> hamburger menu
- Feature cards: 3-column -> 2-column -> single column stacked
- Product screenshots: maintain aspect ratio with responsive images
- Trust bar logos: grid -> horizontal scroll on mobile
- Footer: multi-column -> stacked single column
- Section spacing: 80px+ -> 48px on mobile

### Image Behavior
- Workspace screenshots maintain whisper border at all sizes
- Hero illustrations scale proportionally
- Product screenshots use responsive images with consistent border radius
- Full-width warm white sections maintain edge-to-edge treatment

## 8. Accessibility & States

### Focus System
- All interactive elements receive visible focus indicators
- Focus outline: `2px solid` with focus color + shadow level 200
- Tab navigation supported throughout all interactive components
- High contrast text: near-black on white exceeds WCAG AAA (>14:1 ratio)

### Interactive States
- **Default**: Standard appearance with whisper borders
- **Hover**: Color shift on text, scale(1.05) on buttons, underline on links
- **Active/Pressed**: scale(0.9) transform, darker background variant
- **Focus**: Blue outline ring with shadow reinforcement
- **Disabled**: Warm gray (`#a39e98`) text, reduced opacity

### Color Contrast
- Primary text (rgba(0,0,0,0.95)) on white: ~18:1 ratio
- Secondary text (#615d59) on white: ~5.5:1 ratio (WCAG AA)
- Blue CTA (#0075de) on white: ~4.6:1 ratio (WCAG AA for large text)
- Badge text (#097fe8) on badge bg (#f2f9ff): ~4.5:1 ratio (WCAG AA for large text)

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Notion Blue (`#0075de`)
- Background: Pure White (`#ffffff`)
- Alt Background: Warm White (`#f6f5f4`)
- Heading text: Near-Black (`rgba(0,0,0,0.95)`)
- Body text: Near-Black (`rgba(0,0,0,0.95)`)
- Secondary text: Warm Gray 500 (`#615d59`)
- Muted text: Warm Gray 300 (`#a39e98`)
- Border: `1px solid rgba(0,0,0,0.1)`
- Link: Notion Blue (`#0075de`)
- Focus ring: Focus Blue (`#097fe8`)

### Example Component Prompts
- "Create a hero section on white background. Headline at 64px NotionInter weight 700, line-height 1.00, letter-spacing -2.125px, color rgba(0,0,0,0.95). Subtitle at 20px weight 600, line-height 1.40, color #615d59. Blue CTA button (#0075de, 4px radius, 8px 16px padding, white text) and ghost button (transparent bg, near-black text, underline on hover)."
- "Design a card: white background, 1px solid rgba(0,0,0,0.1) border, 12px radius. Use shadow stack: rgba(0,0,0,0.04) 0px 4px 18px, rgba(0,0,0,0.027) 0px 2.025px 7.85px, rgba(0,0,0,0.02) 0px 0.8px 2.93px, rgba(0,0,0,0.01) 0px 0.175px 1.04px. Title at 22px NotionInter weight 700, letter-spacing -0.25px. Body at 16px weight 400, color #615d59."
- "Build a pill badge: #f2f9ff background, #097fe8 text, 9999px radius, 4px 8px padding, 12px NotionInter weight 600, letter-spacing 0.125px."
- "Create navigation: white header. NotionInter 15px weight 600 for links, near-black text. Blue pill CTA 'Get Notion free' right-aligned (#0075de bg, white text, 4px radius)."
- "Design an alternating section layout: white sections alternate with warm white (#f6f5f4) sections. Each section has 64-80px vertical padding, max-width 1200px centered. Section heading at 48px weight 700, line-height 1.00, letter-spacing -1.5px."

### Iteration Guide
1. Always use warm neutrals -- Notion's grays have yellow-brown undertones (#f6f5f4, #31302e, #615d59, #a39e98), never blue-gray
2. Letter-spacing scales with font size: -2.125px at 64px, -1.875px at 54px, -0.625px at 26px, normal at 16px
3. Four weights: 400 (read), 500 (interact), 600 (emphasize), 700 (announce)
4. Borders are whispers: 1px solid rgba(0,0,0,0.1) -- never heavier
5. Shadows use 4-5 layers with individual opacity never exceeding 0.05
6. The warm white (#f6f5f4) section background is essential for visual rhythm
7. Pill badges (9999px) for status/tags, 4px radius for buttons and inputs
8. Notion Blue (#0075de) is the only saturated color in core UI -- use it sparingly for CTAs and links


Explanation:
**Exploring image generation and hosting options**

I’m considering generating images and may need to use direct scripts. Creating a dynamic website sounds like a good approach, possibly using "pipo-deploy" with Tailscale. I should check the availability. The user mentioned it might be self-contained, but can we open HTML from Discord? Instead of that, sending a zipped folder or HTML file could work, too. Hosting a local process with Tailscale could also be a good option. I'll need to search for "pipo-deploy" script or documentation next.


pipo-deploy <port> [name]   # Expose port to Tailscale at /preview/<name>/

**Tailscale serve**: Port 443 root (`/`) is reserved for the OpenClaw dashboard. Use preview ports 3001–3010 for apps and expose them via `pipo-deploy`.

2. Run `pipo-deploy <port> <name>`


     1|# CLAUDE.md
     2|
     3|This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
     4|
     5|## Environment
     6|
     7|Ubuntu 24.04 LTS, ARM64 (Oracle Cloud VPS). This is the home directory of an AI agent named **Pipo**, serving user **Ignacio/Chicho**.
     8|
     9|- Node.js v22, npm 10, Python 3.12, Git 2.43, Bitwarden CLI, Tailscale
    10|- Tailscale IP: `100.87.116.90`, hostname: `miopenclaw-vnic.tail9799d2.ts.net`
    11|
    12|## Key Directories
    13|
    14|| Path | Purpose |
    15||------|---------|
    16|| `~/.openclaw/workspace/` | Main agent workspace (canonical) |
    17|| `~/openclaw-workspace/` | Secondary git repo with project artifacts |
    18|| `~/.openclaw/openclaw.json` | OpenClaw platform config (gateway, channels, skills) |
    19|| `~/.bw/` | Bitwarden session token |
    20|
    21|## Shell Helpers (from `~/.bash_aliases`)
    22|
    23|```bash
    24|bw-sync           # Load saved Bitwarden session
    25|bw-unlock         # Unlock vault and save session
    26|g "prompt"        # Gemini CLI wrapper
    27|c "prompt"        # Codex safe mode (read-only, no internet)
    28|cn "prompt"       # Codex network mode (full access)
    29|pipo-deploy <port> [name]   # Expose port to Tailscale at /preview/<name>/
    30|pipo-undeploy <name>        # Remove Tailscale preview route
    31|pj                # Job controller (~/.openclaw/workspace/ops/cli-jobs/jobctl.sh)
    32|```
    33|
    34|## Critical Constraints
    35|
    36|**OpenClaw gateway** (port 18789): Restarting severs any active agent session. Prefer config hot-reload when possible (`openclaw config set ...`). If a restart is truly needed (e.g. fixing broken Telegram delivery), it is allowed — Ignacio authorizes it. Use `openclaw gateway restart` and verify logs afterward.
    37|
    38|**Chromium browser tool**: ALWAYS use profile `openclaw` (connected to headless Chromium on port 9222). NEVER use profile `chrome` — that profile requires a manual extension that does not exist on this VPS.
    39|
    40|**Tailscale serve**: Port 443 root (`/`) is reserved for the OpenClaw dashboard. Use preview ports 3001–3010 for apps and expose them via `pipo-deploy`.
    41|
    42|## Deployment Pattern
    43|
    44|1. Start your app on a port in range 3001–3010
    45|2. Run `pipo-deploy <port> <name>`
    46|3. App is accessible at `https://miopenclaw-vnic.tail9799d2.ts.net/preview/<name>/`
    47|
    48|## Agent Workspace Structure (`~/.openclaw/workspace/`)
    49|
    50|- `SOUL.md` / `AGENTS.md` — agent persona and session protocol
    51|- `MEMORIES.md` — long-term curated memory (canonical; `MEMORY.md` is a compat alias)
    52|- `memory/YYYY-MM-DD.md` — daily session logs
    53|- `HEARTBEAT.md` — periodic task checklist (empty = skip heartbeat)
    54|- `skills/` — installed agent skills (bitwarden, openclaw-bitwarden, parallel-preview-orchestrator)
    55|- `ops/` — operational scripts (cli-jobs, docker-cli-stack)
    56|- `node_modules/` — Playwright installed here
    57|
    58|## Secrets
    59|
    60|Retrieved from Bitwarden vault. After `bw-sync`, use:
    61|```bash
    62|bw get username "item-name"
    63|bw get password "item-name"
    64|```
    65|
    66|API keys (Gemini, OpenAI/Codex, GitHub) are auto-loaded from `~/.openclaw/openclaw.json` into the shell environment via `~/.bash_aliases`.
    67|


Explanation:
**Planning installation images**

I need to build some installation instructions, likely using terminal or pipo-deploy. I’m thinking of creating a directory under /.hermes/artifacts/panel-install-site. I may need to generate IKEA-style images with precise measurements, positioning, and details on building and fixing the frame to the wall. I want to use the image_generate tool since it might simplify the process. It’s tricky because the image generator often mixes up text, so overlaying exact instructions in HTML could be the best approach.
**Generating instruction images**

The user seems to want images from GPT Image 2 based on their reference to "hechas por imagen2." I can clarify that the illustrations will come from GPT Image 2, while the numerical text will be handled in HTML to prevent any issues with the model. I'll likely use image_generate, which doesn't require a source image. I need to generate three images at 1024x1536 or 1536x1024 using the same Codex image script; embedding file paths in the site will be essential.
**Creating instruction visuals**

I could create the instruction SVGs myself, but since the user mentioned "hechas por imagen2," I should stick with the GPT Image 2 model for generating those images. I can produce illustrative panels that the site will utilize. However, I’m considering the need for exactness. It might also be beneficial to create precise SVG diagrams within the HTML, and I can aim for an "IKEA-style" sheet featuring generic line art to combine these elements effectively.
**Calculating placement adjustments**

I'm thinking about the placement of the photo with margins of 42 cm on the right and 147 cm on the left. We need an adjustable slider for the right margin, defaulting to 40 cm. I’m figuring out the dimensions for wall markings and frames, noting the visible panel sizes and offsets. The LED positioning is also a consideration, ensuring it reflects properly while staying clear of the panel's edges. I’m weighing the necessary adjustments carefully!
**Planning LED Installation**

I’m working on how to install the LED lights within the panel perimeter. The LED lies on the outer edge, and light needs to emerge after a 5 cm lip. I’ll start with a 5 cm adjustment after a 15-minute test, noting that less than 3 cm shows dots while more than 7 cm causes a weak halo.

Next, I’ll outline my steps, including safety precautions and assembly instructions in an "IKEA style" with simple images. I need to ensure accurate contact points and use the right adhesives.
**Creating Assembly Instructions**

I'm considering how to create the best assembly instructions without text, just using simple dimension arrows. I plan to include steps for "frame assembly and LED halo" and "gluing slat panels to frame," possibly creating a triptych of images.

I think I could use a direct script to generate these images, making multiple sequential calls. I want to ensure they're in a black-and-white IKEA manual style, focusing on vector line art. Local SVG diagrams might add reliability for instructions. For layout, I’ll create images in landscape and portrait formats as needed.
**Planning Instruction Sheet Display**

I’m thinking about how to present each card image in square or landscape format but using portrait for the instruction sheet. The site can show these together. I should also include a high-resolution version labeled "Sheet 1 2 3."

To proceed, I might need to use pipo-deploy for setting things up. I’ll run the site and verify that everything works, possibly using a Python HTTP server to create a dynamic web app. This looks like a solid plan to get started!
**Planning site deployment**

I’m setting up an HTTP server to ensure the site works correctly at the specified path. I'll need to check if the assets work with relative paths and confirm that `pipo-deploy` is installed.

I plan to test the deployment on my local server, navigating to the local URL to verify everything. Afterward, I'll create a downloadable zip file for easy access and possibly include media attachments. It’s also essential to consider including relevant notes, but I should avoid asking for clarifications unless necessary. I'll need to create any necessary images as part of this process.
**Creating image generation script**

I'm looking to utilize an existing script to generate instructional images using OpenAI's Codex with Python. I want to focus on crafting precise prompts for this. The plan is to generate these images, possibly using Base64 encoding, and not requiring any image input.

To ensure reliability, I might call the image generation sequentially. I’ll check that `numpy` is installed, though I believe it is. For the website generation, a small JavaScript might be helpful. It’s essential to prepare instructions so that if `gpt-image-2` can't produce clear text, we specify to generate only large numerals 1-4. I'm targeting to create three files.

import base64, sys, time
from pathlib import Path
sys.path.insert(0, '/home/ubuntu/.hermes/hermes-agent')
from agent.auxiliary_client import _read_codex_access_token, _codex_cloudflare_headers
import openai

OUTDIR = Path('/home/ubuntu/.hermes/artifacts/panel-install-site/assets')
OUTDIR.mkdir(parents=True, exist_ok=True)

def make_client():
    token = _read_codex_access_token()
    if not token:
        raise SystemExit('No Codex token')
    return openai.OpenAI(
        api_key=token,
        base_url='https://chatgpt.com/backend-api/codex',
        default_headers=_codex_cloudflare_headers(token),
    )

client = make_client()

base_style = """
Create a clean IKEA-style assembly manual illustration: black and dark gray vector line art on an off-white paper background, minimal, precise, friendly, no photorealism, no color except very subtle warm yellow glow for LED where requested. Use numbered circles only; avoid written words and avoid fake labels. Use simple pictograms: wall, wood frame, drill, screws, LED strip, adhesive, vertical slat panels, hands. Keep empty margins. The image must be usable as an instruction drawing inside a Spanish DIY website.
""".strip()

prompts = [
    (
        'ikea-01-measure-frame.png',
        base_style + """
Sheet 1: measured planning for a wall-mounted wood slat panel. Show four numbered mini-panels:
1) A rectangular wall being measured with tape measure; a narrow tall panel area is positioned closer to the right side of the wall, not centered.
2) The visible panel is almost floor-to-ceiling, leaving tiny top and bottom margins.
3) Behind it, a smaller hidden wooden frame sits inset from all four edges, with a clear lip/overhang hiding the frame.
4) A cut list visual: two long vertical wooden pieces and five shorter horizontal cross pieces laid on the floor.
No text except numbers 1,2,3,4. Include clear dimension arrows but without readable text.
""".strip()
    ),
    (
        'ikea-02-fix-led.png',
        base_style + """
Sheet 2: building and mounting the wooden frame plus LED. Show four numbered mini-panels:
1) Assemble a rectangular wooden frame on the floor: two vertical sides and five horizontal crossbars; screws at corners and crossbars.
2) Lift/present the frame onto a wall, use a level, mark drill holes.
3) Drill into masonry wall, insert wall plugs/tarugos, screw the frame firmly to the wall.
4) Apply warm LED strip around the OUTER EDGE/SIDE of the frame, not the front face; show a soft warm halo glowing behind the future panel and a small accessible power supply box off to one side.
No text except numbers 1,2,3,4.
""".strip()
    ),
    (
        'ikea-03-glue-panels.png',
        base_style + """
Sheet 3: attaching the vertical EPS wood slat panels. Show four numbered mini-panels:
1) Apply construction adhesive dots/short beads on the five horizontal frame crossbars, not everywhere.
2) Place the first vertical slat panel straight using a level; press at the five crossbar contact points.
3) Repeat with eleven vertical slat panels side-by-side, tight seams, aligning top and bottom.
4) Use painter's tape to hold panels while curing; final view shows a clean tall wood slat panel with hidden warm LED halo around edges.
No text except numbers 1,2,3,4.
""".strip()
    ),
]

def generate(prompt, out):
    image_b64 = None
    with client.responses.stream(
        model='gpt-5.4',
        store=False,
        instructions='You are an assistant that must fulfill image generation requests by using the image_generation tool when provided.',
        input=[{
            'type': 'message',
            'role': 'user',
            'content': [{'type': 'input_text', 'text': prompt}],
        }],
        tools=[{
            'type': 'image_generation',
            'model': 'gpt-image-2',
            'size': '1024x1536',
            'quality': 'medium',
            'output_format': 'png',
            'background': 'opaque',
            'partial_images': 1,
        }],
        tool_choice={
            'type': 'allowed_tools',
            'mode': 'required',
            'tools': [{'type': 'image_generation'}],
        },
    ) as stream:
        for event in stream:
            t = getattr(event, 'type', '')
            if t == 'response.image_generation_call.partial_image':
                partial = getattr(event, 'partial_image_b64', None)
                if partial:
                    image_b64 = partial
            elif t == 'response.output_item.done':
                item = getattr(event, 'item', None)
                if getattr(item, 'type', None) == 'image_generation_call':
                    result = getattr(item, 'result', None)
                    if result:
                        image_b64 = result
        final = stream.get_final_response()
    for item in getattr(final, 'output', None) or []:
        if getattr(item, 'type', None) == 'image_generation_call':
            result = getattr(item, 'result', None)
            if result:
                image_b64 = result
    if not image_b64:
        raise RuntimeError(f'No image result for {out}')
    out.write_bytes(base64.b64decode(image_b64))
    print(out)

for filename, prompt in prompts:
    out = OUTDIR / filename
    if out.exists() and out.stat().st_size > 10000:
        print(f'skip existing {out}')
        continue
    generate(prompt, out)
    time.sleep(1)


Explanation:
**Verifying generated images**

I need to verify the generated images using the vision tool. I’m thinking maybe I could analyze multiple images at once, possibly using a parallel approach. Also, I wonder if I should call the vision tool three times in a row or try a more efficient method. It seems like there are options to explore for optimizing this process, so I’ll consider how best to proceed with these image verifications.

Question: Verify this looks like an IKEA-style instruction sheet for measuring/hidden frame/cut list. Note if it has problematic unreadable text or wrong content.

Question: Verify this looks like an IKEA-style instruction sheet for frame assembly, drilling, fixing to wall, and LED on outer edge. Note major issues.

Question: Verify this looks like an IKEA-style instruction sheet for adhesive and attaching slat panels. Note major issues.


Here's a breakdown of the image and an assessment of its IKEA-style instruction sheet qualities:

**Image Description**

The image is a four-panel diagram, presented in a style reminiscent of IKEA instruction manuals. It depicts the steps involved in measuring, building, and installing a slatted wall panel with a hidden frame.

*   **Panel 1:** Shows a room corner with a blank wall. A tape measure is present, and arrows indicate the need to measure the height and width of the wall area where the slatted panel will be installed. A representation of the slatted panel is shown in the measured area.
*   **Panel 2:** Focuses on the slatted panel itself. Arrows indicate the need to measure the height and width of the panel.
*   **Panel 3:** Shows a wooden frame being attached to the wall. Arrows indicate the direction of attachment. The slatted panel is positioned next to the frame, suggesting it will be attached to the frame.
*   **Panel 4:** Displays the individual wooden components: two long vertical pieces (likely the sides of the frame) and five shorter horizontal pieces (likely the frame's crossbars).

**IKEA-Style Instruction Sheet Verification**

*   **Visual Style:** The image uses a clean, minimalist black-and-white line drawing style, which is a hallmark of IKEA instructions. The use of arrows to indicate measurements and directions is also consistent with this style.
*   **Step-by-Step Approach:** The diagram breaks down the process into sequential steps, which is typical of IKEA instructions.
*   **Focus on Visuals:** The instructions rely heavily on visual cues rather than written text, which is another characteristic of IKEA manuals.
*   **Lack of Text:** There is no readable text in the image. This is common in IKEA instructions, which often rely on universal symbols and diagrams to overcome language barriers.

**Potential Issues**

*   **Oversimplification:** The instructions are very basic. A real IKEA manual would likely include more detail about the specific tools and fasteners needed, as well as safety precautions.
*   **Missing Steps:** The diagram doesn't show how the slatted panel is attached to the frame. This is a crucial step that would need to be included in a complete set of instructions.
*   **Ambiguity:** The exact purpose of the frame is not explicitly stated. While it's implied that the slatted panel will be attached to it, this could be made clearer.

**Conclusion**

The image strongly resembles an IKEA-style instruction sheet. It captures the visual style, step-by-step approach, and reliance on visuals that are characteristic of IKEA manuals. However, it is oversimplified and lacks crucial details, such as how the slatted panel is attached to the frame. There is no unreadable text, but the lack of any text at all could be considered a drawback.


Here's a breakdown of the image and an assessment of its IKEA-style instruction sheet qualities:

**Image Description**

The image is a four-panel illustration depicting the assembly and installation of a wooden frame, likely for a shelf or decorative piece, with integrated LED lighting. The style is reminiscent of IKEA instruction manuals, using simple line drawings and numbered steps.

*   **Panel 1:** Shows the frame being assembled. Two hands are shown holding the frame together while screws are being inserted to connect the horizontal and vertical pieces.
*   **Panel 2:** Depicts the frame being lifted and positioned against a wall. A spirit level is placed on top of the frame to ensure it is level. Arrows indicate upward movement, suggesting the frame is being lifted into place.
*   **Panel 3:** Illustrates the process of drilling holes in the wall, inserting wall anchors (plastic plugs), and then screwing the frame to the wall. The sequence is shown with arrows indicating the order of operations.
*   **Panel 4:** Shows an LED strip being attached to the outer edge of the frame. A close-up inset shows the adhesive backing of the LED strip being peeled off. A power adapter is also shown, indicating the power source for the LED lights.

**IKEA-Style Instruction Sheet Verification**

Yes, this image strongly resembles an IKEA-style instruction sheet. Here's why:

*   **Simplified Drawings:** The illustrations are simple, using clear lines and minimal detail. This is a hallmark of IKEA instructions.
*   **Numbered Steps:** The steps are clearly numbered (1, 2, 3, 4), providing a logical sequence for assembly and installation.
*   **Visual Focus:** The instructions rely heavily on visual cues rather than written text. This makes them accessible to people who speak different languages.
*   **Step-by-Step Process:** Each panel breaks down the process into a distinct step, making it easy to follow.
*   **Focus on Hardware:** The illustrations clearly show the hardware (screws, wall anchors, LED strip) and how they are used.

**Major Issues/Concerns**

While the image is generally well-executed, there are some potential issues:

*   **Screw Placement in Panel 1:** The screw placement in the first panel is not ideal. Screws are being placed directly into the end grain of the horizontal pieces. This is a weak joint and prone to failure. Ideally, screws should be driven through the vertical pieces into the horizontal pieces, or a stronger joint (like a mortise and tenon or dowel joint) should be used.
*   **Wall Anchor Placement:** The image shows three wall anchors being used. Depending on the size and weight of the frame, this may not be sufficient. The type of wall (drywall, plaster, concrete) also affects the number and type of anchors needed.
*   **Electrical Safety:** The image doesn't show any consideration for electrical safety. The LED strip power adapter is simply plugged in. It's important to ensure the adapter is properly rated for the voltage and current, and that the wiring is done safely.
*   **No Pre-Drilling:** The first panel does not show any pre-drilling of the wood. This is important to prevent the wood from splitting when the screws are inserted.
*   **No mention of the type of drill bit:** The third panel does not mention the type of drill bit to use for the wall. This is important to ensure the correct size hole is drilled for the wall anchor.

**In conclusion:** The image successfully mimics the style of an IKEA instruction sheet. However, it contains some potentially problematic instructions regarding structural integrity, wall mounting, and electrical safety. These issues would need to be addressed before the instructions could be considered safe and reliable.


Okay, let's break down this image and analyze it.

**Overall Description:**

The image presents a four-step instruction guide, visually depicted in a style reminiscent of IKEA assembly instructions. It illustrates the process of attaching slat panels to a frame, presumably for a wall decoration or similar purpose. The style is minimalist, using line drawings with no color except for a yellow glow in the final step.

**Detailed Breakdown of Each Step:**

*   **Step 1:** This panel shows a rectangular frame mounted on a wall. A hand is using a caulking gun to apply adhesive to the horizontal supports of the frame. Next to the frame is a single slat panel, presumably the type that will be attached. The frame has pre-drilled holes with what appear to be screw heads visible, suggesting that screws will be used in addition to adhesive.

*   **Step 2:** This panel shows the first slat panel being attached to the frame. Four hands are shown pressing the slat panel against the frame, presumably to ensure good adhesion. A level is placed against the side of the frame, indicating the need to ensure the frame is vertically aligned.

*   **Step 3:** This panel shows a series of arrows pointing downwards towards a large group of slat panels. Below this, a single slat panel is shown with an arrow pointing towards a smaller group of slat panels. This suggests that the remaining slat panels are to be attached in a similar manner to the first one, and that the smaller group of slats are to be cut to size.

*   **Step 4:** This panel shows the completed assembly of slat panels attached to the frame. The frame is now fully covered with the slat panels. The yellow glow emanating from behind the panel suggests that the finished product may be intended to be backlit or have some sort of lighting effect. The slats are held in place by tape.

**Analysis and Verification:**

Yes, this image strongly resembles an IKEA-style instruction sheet. Here's why:

*   **Minimalist Line Drawings:** The use of simple line drawings with minimal detail is a hallmark of IKEA instructions.
*   **Step-by-Step Format:** The numbered panels clearly indicate a sequential process.
*   **Focus on Visual Communication:** The instructions rely heavily on visual cues rather than written text.
*   **Generic Human Figures:** The hands are drawn in a simple, generic style, typical of IKEA instructions.

**Major Issues and Omissions:**

While the image is stylistically similar to IKEA instructions, there are some significant issues and omissions that would make it a poor instruction guide in reality:

1.  **Lack of Detail:** The instructions are too vague. For example, it doesn't specify the type of adhesive to use, the spacing between the slats (if any), or how to cut the slats to size.
2.  **Missing Tools and Materials:** The instructions don't explicitly list all the necessary tools and materials. While a caulking gun and level are shown, it's unclear if screws are required, and there's no mention of a saw or cutting tool.
3.  **Unclear Attachment Method:** While adhesive is shown, the presence of screw heads in the frame suggests that screws are also used. However, this is not explicitly stated or shown.
4.  **No Safety Information:** IKEA instructions often include basic safety warnings, which are absent here.
5.  **Tape:** The tape in the final step is not mentioned in the previous steps.
6.  **Cutting:** The instructions do not specify how to cut the slats to size.

**Conclusion:**

The image is a good imitation of an IKEA-style instruction sheet, but it lacks the clarity and detail necessary to be a truly effective guide. The major issues are the lack of specific instructions, missing tool and material information, and the absence of safety warnings.


Question: site:easy.com.ar pistola aplicadora cartucho Easy Argentina sellador


Pistola Aplicadora Para Cartuchos Rojo Profesional Silver Shadow - Easy
[...]
Pinturas Adhesivos Colas vinílicas y de contacto Pistola Aplicadora Para Cartuchos Rojo Profesional Silver Shadow
[...]
## Pistola Aplicadora Para Cartuchos Rojo Profesional Silver Shadow
[...]
La pistola aplicadora Silver Shadow es un instrumento profesional diseñado para la aplicación precisa de selladores y adhesivos en cartuchos. Su diseño ergonómico en color rojo brillante combina funcionalidad con alta durabilidad para tus trabajos de construcción y reparación.
[...]
- Mango con agarre antideslizante para mayor seguridad durante el trabajo
- Sistema de aplicación preciso para un control óptimo del material
- Diseño ergonómico que reduce la fatiga durante el uso prolongado
- Estructura resistente en color rojo de calidad profesional
[...]
ola Aplicadora Silver Shadow
[...]
Esta herramienta se destaca por su construcción robusta y su facilidad de uso, permitiéndote aplicar selladores y adhesivos con precisión profesional. Su diseño ergonómico te garantiza un trabajo cómodo y eficiente en cada proyecto. Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.
[...]
# Pistola Aplicadora Para Cartuchos Rojo Profesional Silver Shadow
[...]
### Pistola Aplicadora Para Cartuchos Rojo Profesional Silver Shadow

Pistola Aplicadora Para Cartuchos Metálica Dealer - Easy
[...]
Pinturas Adhesivos Colas vinílicas y de contacto Pistola Aplicadora Para Cartuchos Metálica Dealer
[...]
## Pistola Aplicadora Para Cartuchos Metálica Dealer
[...]
La pistola aplicadora metálica Dealer es el instrumento ideal para aplicar selladores y adhesivos en cartuchos de manera precisa y profesional. Su diseño robusto y construcción en metal te garantiza durabilidad y un trabajo de calidad.
[...]
### Características Destacadas Pistola Aplicadora Metálica Dealer
[...]
- Mecanismo de liberación rápida que facilita el cambio de cartuchos
- Diseño ergonómico con mango antideslizante para mayor comodidad durante el uso
- Sistema de avance suave para un control preciso del material
- Construcción totalmente metálica que asegura mayor resistencia y vida útil
[...]
### Por qué nos gusta la Pistola Aplicadora Metálica Dealer
[...]
Esta pistola aplicadora se destaca por su construcción resistente y su facilidad de uso. Es una herramienta confiable que vas a poder usar en diferentes proyectos de construcción y reparación, garantizando aplicaciones precisas y profesionales. Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.
[...]
# Pistola Aplicadora Para Cartuchos Metálica Dealer
[...]
### Pistola Aplicadora Para Cartuchos Metálica Dealer

Colas Vinílicas y de Contacto | Ofertas y Promos Bancarias - Easy

## Pistola Aplicadora Para Cartuchos Rojo Profesional Silver Shadow
[...]
## Pistola Aplicadora Para Cartuchos Metálica Dealer
[...]
## Pistola Aplicadora Reforzada Roja Dealer

Selladores | Ofertas y Promos Bancarias para Aprovechar - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

# Selladores

95 Productos

Calculá cuántas cajas necesitás

Calcular

##### Filtros

Marca

Marca

Tipo de Producto

Color

Dimensiones

Rangos de precio

Ordenar por Relevancia

RelevanciaVentasFecha de releaseDescuentoPrecio: mayor a menorPrecio: menor a mayorNombre, ascendenteNombre, descendente

## Espuma Poliuretano Fast Bonding 750 Ml Fischer

## Sellador Silicona Transparente 260 Ml Fischer

## Sellador Poliuretano Gris 400 Grs Fischer

## Adhesivo Multimaterial 310 Ml Fischer

## Sellador Poliuretano Blanco 400 Grs Fischer

## Sellador Acrílico Blanco 310 Ml Fischer

## Sellador Silicona Transparente 280 Ml TACSA

## Sellador Metal Gris 300 Ml Suprabond

## Espuma Poliuretano Fast Bonding 500 Ml Fischer

## Adhesivo Epoxi Blanco 150 Grs Suprabond

## Sellador Silicona Blanco 260 Ml Fischer

## Sellador Para Canaletas Gris 400 Grs Fischer

## Adhesivo Epoxi Metalico 200 Grs Erpox

## Espuma Poliuretano Expandida 750 Ml Tacsa

## Masilla Interior Para Grietas y Fisuras Blanco Mate 500 Grs Recumix Sinteplast

## Sellador Silicona Transparente 280 Grs Candela

## Sellador Transparente 280 Grs Juntaflex

## Enduido Interior Blanco Mate 1250 Grs Sinteplast

## Mortero Para Grietas Gris Mate 1250 Grs Recumix Sinteplast

## Adhesivo Sellador Blanco 360 Grs Fischer

1

2

3

4

5

Página 1Página 2Página 3Página 4Página 5

Página 1 de 5

Sellador Transparente 280 Grs Juntaflex - Easy
[...]
Pinturas Adhesivos Selladores Sellador Transparente 280 Grs Juntaflex
[...]
## Sellador Transparente 280 Grs JuntaFlex
[...]
El sellador transparente JuntaFlex de 280 Grs es el material ideal para sellar juntas y uniones en tu casa. Su fórmula transparente te permite realizar trabajos prolijos sin alterar la estética de las superficies.
[...]
### Características Destacadas Sellador Transparente JuntaFlex
[...]
- Ideal para sellar juntas en baños, cocinas y otras áreas que requieren protección.
- Fabricación nacional que garantiza calidad y disponibilidad.
- Acabado transparente que mantiene la apariencia original de las superficies.
- Presentación práctica de 280 Grs con pico aplicador para mayor precisión.
[...]
Sellador Transparente JuntaFlex
[...]
Este sellador es la solución práctica para mantener tus espacios protegidos contra la humedad y filtraciones. Su aplicación precisa y acabado transparente te permiten lograr resultados profesionales en tus trabajos de mantenimiento. Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.
[...]
Juntaflex
[...]
# Sellador Transparente 280 Grs Juntaflex
[...]
Juntaflex
[...]
### Sellador Transparente 280 Grs Juntaflex
[...]
## Especificaciones


Question: site:easy.com.ar tarugo tornillo 8mm Easy Argentina pared


Tarugos | Ofertas y Promos en Ferretería y Fijaciones - Easy

## Tarugo con Tope N°8 + Tornillo Mampostería x 100 Un
[...]
## Tarugo Para Ladrillo 8 Mm + Tornillo 75 Un TEL
[...]
## Tarugo Con Tornillo Para Hormigón 8 Mm 200 Un Fischer
[...]
## Tarugo Nylon SX6 Mm con Tornillo para Pared x 400 Un Fischer
[...]
## Tarugo Duopower Nylon + Tornillo 8 Mm X 10 Un Fischer
[...]
## Tarugo con Tornillo 8x40 Mm Mampostería 4 Un Tel
[...]
## Tarugos Nylon 8 Mm Hormigón y Ladrillo 200 Un Fischer
[...]
## Tarugo Nylon con Tope 8x40 Mm para Mampostería TEL
[...]
## Tarugos Fischer N°8 Para Hormigón y Ladrillo 350 Un

Tarugo Duopower Nylon + Tornillo 8 Mm X 10 Un Fischer - Easy
[...]
Ferreteria Fijaciones Tarugos Tarugo Duopower Nylon + Tornillo 8 Mm X 10 Un Fischer
[...]
## Tarugo Duopower Nylon + Tornillo 8 Mm Fischer
[...]
Los tarugos Duopower de Fischer son la solución más versátil para tus trabajos de fijación. Con su innovadora combinación de nylon y acero zincado, vas a lograr sujeciones firmes y duraderas en diferentes tipos de materiales.
[...]
- Producto importado de Albania que cumple con los estándares de calidad Fischer
- Diseño exclusivo Duopower que asegura un agarre óptimo
- Fabricados en nylon de alta resistencia con tornillo de acero zincado incluido
- Medida de 8 mm, ideal para fijaciones de uso general
- Pack de 10 unidades en práctico blister para mejor organización
[...]
# Tarugo Duopower Nylon + Tornillo 8 Mm X 10 Un Fischer
[...]
Exclusivo Online
[...]
$6.105
[...]
### Tarugo Duopower Nylon + Tornillo 8 Mm X 10 Un Fischer

Tarugo Nylon S8 + Tornillo 8 Mm X 4 Un Fischer - Easy
[...]
Ferreteria Fijaciones Tarugos Tarugo Nylon S8 + Tornillo 8 Mm X 4 Un Fischer
[...]
## Tarugo Nylon S8 + Tornillo 8 Mm Fischer
[...]
Los tarugos Fischer con tornillos de 8 mm son la solución ideal para fijaciones seguras y confiables. Este kit de 4 unidades te ofrece la calidad y resistencia que necesitás para tus trabajos de instalación.
[...]
### Características Destacadas Tarugo Nylon S8 + Tornillo Fischer
[...]
- Acabado zincado que brinda mayor protección contra la corrosión
- Diseño versátil para diferentes tipos de superficies
- Fabricación nacional con materiales de primera calidad: nylon y acero zincado
- Kit completo de 4 tarugos de nylon con sus respectivos tornillos de 8 mm
[...]
Este conjunto de tarugos y tornillos Fischer te brinda la confianza y seguridad que necesitás para tus instalaciones. Su diseño y materiales de calidad garantizan un anclaje firme y duradero, ideal para todo tipo de fijaciones en tu casa.
[...]
# Tarugo Nylon S8 + Tornillo 8 Mm X 4 Un Fischer
[...]
Referencia: 1200186
[...]
Exclusivo Online
[...]
$2.050
[...]
### Tarugo Nylon S8 + Tornillo 8 Mm X 4 Un Fischer

Tarugo Para Ladrillo 8 Mm + Tornillo 75 Un TEL - Easy
[...]
Ferreteria Fijaciones Tarugos Tarugo Para Ladrillo 8 Mm + Tornillo 75 Un TEL
[...]
## Tarugo Para Ladrillo 8 Mm + Tornillo 75 Un
[...]
Descubrí la solución perfecta para tus trabajos de fijación en mampostería con este kit de tarugos y tornillos nacionales. Este conjunto de 75 unidades te ofrece todo lo necesario para realizar instalaciones seguras y duraderas en ladrillos macizos.
[...]
- Color amarillo que facilita su identificación durante la colocación
- Diseño sin tope para mayor versatilidad en la instalación
- Fabricación nacional, garantizando calidad y disponibilidad
- 40 Mm de largo, ideal para fijaciones en ladrillo macizo y mampostería
- Kit completo de 75 unidades de tarugos de nylon de 8 Mm de diámetro
[...]
Este conjunto de tarugos y tornillos es la herramienta ideal para tus proyectos de instalación en mampostería. Su fabricación nacional asegura una calidad confiable, mientras que sus dimensiones precisas garantizan fijaciones firmes y duraderas en todo tipo de ladrillos macizos.
[...]
# Tarugo Para Ladrillo 8 Mm + Tornillo 75 Un TEL
[...]
127328
[...]
$12.780
[...]
### Tarugo Para Ladrillo 8 Mm + Tornillo 75 Un TEL

Tarugo 8 Mm Para Mampostería Con Tornillo 4 Un Tel - Easy
[...]
Ferreteria Fijaciones Tarugos Tarugo 8 Mm Para Mampostería Con Tornillo 4 Un Tel
[...]
## Tarugo 8 Mm Para Mampostería Con Tornillo
[...]
Este kit de tarugos y tornillos de 8 Mm es la solución ideal para tus trabajos de fijación en mampostería. Fabricado en Argentina con materiales de calidad, te ofrece la resistencia y durabilidad que necesitás para instalaciones seguras.
[...]
- Fabricación nacional que garantiza calidad y disponibilidad
- Cuenta con tope incorporado para una fijación precisa
- Diseñado especialmente para uso en ladrillo macizo y mampostería
- Incluye tornillos compatibles para una instalación completa
- Kit de 4 unidades de tarugos de nylon gris de 8 Mm de diámetro y 40 Mm de largo
[...]
Este conjunto de tarugos y tornillos te brinda la seguridad que necesitás en tus trabajos de fijación. Su diseño específico para mampostería y su sistema con tope te permite realizar instalaciones firmes y duraderas de manera simple y efectiva.
[...]
# Tarugo 8 Mm Para Mampostería Con Tornillo 4 Un Tel
[...]
### Tarugo 8 Mm Para Mampostería Con Tornillo 4 Un Tel


Question: site:easy.com.ar tornillos madera 4x50 Easy Argentina


Tornillo para Madera 4,5X50,8 Mm Negro Carpintería X 50 Un Tel - Easy
[...]
Ferreteria Fijaciones Tornillos Tornillo para Madera 4,5X50,8 Mm Negro Carpintería X 50 Un Tel
[...]
## Tornillos para Madera Negro 4,5x50,8 Mm
[...]
Estos tornillos para madera son la solución ideal para tus trabajos de carpintería y armado de muebles. Con un acabado negro fosfatado que brinda mayor protección contra la corrosión, vas a poder realizar tus proyectos con materiales de calidad nacional.
[...]
- Fabricación nacional con altos estándares de calidad
- Pack de 50 unidades ideal para proyectos medianos y grandes
- Rosca total para mejor agarre en todo tipo de maderas
- Acabado negro fosfatado que asegura mayor durabilidad
- Medidas precisas de 4,5 Mm de diámetro y 50,8 Mm de largo para un ajuste perfecto
[...]
Su diseño específico para trabajos en madera y su acabado protector los convierte en una herramienta confiable para tus proyectos de carpintería. El pack de 50 unidades te asegura tener suficiente material para completar tus trabajos sin interrupciones.
[...]
# Tornillo para Madera 4,5X50,8 Mm Negro Carpintería X 50 Un Tel
[...]
Referencia: 1201336
[...]
clusivo Online
[...]
$6.675
[...]
### Tornillo para Madera 4,5X50,8 Mm Negro Carpintería X 50 Un Tel

Tornillos | Ofertas y Promos Bancarias en Ferretería - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

# Tornillos

346 Productos

Calculá cuántas cajas necesitás

Calcular

##### Filtros

Marca

Marca

Tipo de Producto

Color

Rangos de precio

Ordenar por Relevancia

RelevanciaVentasFecha de releaseDescuentoPrecio: mayor a menorPrecio: menor a mayorNombre, ascendenteNombre, descendente

## Tornillo Aguja T2 6x1 Cm x 200 Un Tel

## Tornillo Aguja T1 4,2X14,2 Mm Steel Framing X 100 Un Tel

## Tornillo Autoperforante T2 3,5x25,4 Mm Drywall 900 Un Tel

## Tornillo Mecha T1 4,2X12,7 Mm Steel Framing X 800 Un Tel

## Tornillo T2 Autoperforante 6X1.1/8" N 100 Un Tel

## Tornillo Mecha 4,2X14,2 Mm Steel Framing X 100 Un Tel

## Tornillo Mecha T1 4,8X19 Mm Steel Framing 40 Un Tel

## Tornillo Hexagonal Cincado 6,3x50,8 Mm Chapa-Madera TEL

## Tornillo Autoperforante Hex T2 14x2.1/2" Chapa-Madera 8 Un Tel

## Tornillo Madera 6X2 N° Negro 55 Un Tel

## Tornillo Autoperforante T2 3,5X28,5 Mm Drywall 100 Un Tel

## Tornillo Aguja T3 6X1.1/2 Steel Framing N°100 Tel

## Tornillo Hexagonal Autoperforante Madera 14x3 X 50 Un Tel

## Tornillo Madera Cincado 3,8x31,8 Mm X 100 Un TEL

## Kit Tarugo y Tornillo para Pared Maciza 50 Un Fischer

## Tornillo Autoperforante 4,2X12,7 Mm Para Metal X 100 Un Tel

## Tornillo Cabeza Tanque 6,35x50,8 Mm para Metal y Chapa 12 Un Tel

## Tacos SXRL 10x80 Mm con Tirafondo 10 Un Fischer

## Tornillo Autoperforante Hex T1 5,5x50,8 Mm Steel Framing 12 Un Tel

## Tornillo Autoperforante 5,5X38,1 Mm Metal 15 Un Tel

1

2

3

4

5

Página 1Página 2Página 3Página 4Página 5Página 6Página 7Página 8Página 9Página 10Página 11Página 12Página 13Página 14Página 15Página 16Página 17

Página 1 de 17

Tornillo Madera 8X2 D50 X 1 Un Tel - Easy
[...]
Ferreteria Fijaciones Tornillos Tornillo Madera 8X2 D50 X 1 Un Tel
[...]
## Tornillo para Madera 8X2 D50
[...]
Este tornillo para madera de fabricación nacional es la herramienta perfecta para tus trabajos de carpintería y bricolaje. Su diseño optimizado asegura un agarre firme y duradero en todo tipo de maderas.
[...]
- Medidas precisas de 8x2 D50, ideales para diversos proyectos
- Diseño específico para madera que garantiza un óptimo agarre
- Acabado en color amarillo que facilita su visualización durante el trabajo
- Fabricado en Argentina con materiales de alta calidad
[...]
Este tornillo es un elemento fundamental para cualquier proyecto de carpintería. Su fabricación nacional garantiza calidad y durabilidad, mientras que su diseño específico para madera asegura un ajuste perfecto en tus trabajos.
[...]
# Tornillo Madera 8X2 D50 X 1 Un Tel
[...]
Referencia: 1200365
[...]
$6.675
[...]
### Tornillo Madera 8X2 D50 X 1 Un Tel

Tornillo Madera 4,5X50,8 Mm Carpintería X 100 Un Tel - Easy
[...]
Ferreteria Fijaciones Tornillos Tornillo Madera 4,5X50,8 Mm Carpintería X 100 Un Tel
[...]
## Tornillos para Madera 4,5x50,8 Mm Carpintería x 100 Un
[...]
Estos tornillos para madera son la solución ideal para tus proyectos de carpintería y armado de muebles. Con un acabado cincado-fosfato que asegura mayor durabilidad, vas a tener todo lo necesario para trabajar en tus creaciones.
[...]
- Presentación en práctico blister
- Fabricación nacional de alta calidad
- Acabado cincado-fosfato que brinda protección contra la corrosión
- Medidas precisas: 4,5 Mm de diámetro y 50,8 Mm de largo
- Pack de 100 unidades con rosca total para mayor agarre
[...]
Este set de tornillos te ofrece la calidad y resistencia necesarias para tus trabajos de carpintería. Su rosca total garantiza un agarre firme en la madera, mientras que su acabado cincado-fosfato los protege contra el desgaste, haciéndolos perfectos para muebles y proyectos que requieren uniones duraderas.
[...]
# Tornillo Madera 4,5X50,8 Mm Carpintería X 100 Un Tel
[...]
Referencia: 1200350
[...]
$5.461,25
[...]
6.42
[...]
### Tornillo Madera 4,5X50,8 Mm Carpintería X 100 Un Tel

Tornillo Madera Rosca Parcial 4X55 Mm 6 Un Tel - Easy
[...]
Ferreteria Fijaciones Tornillos Tornillo Madera Rosca Parcial 4X55 Mm 6 Un Tel
[...]
## Tornillo Madera Rosca Parcial 4X55 Mm 6 Un Tel
[...]
Este set de tornillos para madera es el elemento fundamental para tus trabajos de carpintería y armado de muebles. Con rosca parcial y acabado cincado, te aseguran un agarre firme y duradero en todos tus proyectos.
[...]
- Presentación en mini blister para mejor organización y almacenamiento
- Fabricación nacional que garantiza calidad y durabilidad
- Acabado cincado que brinda protección contra la corrosión
- Medidas de 4 Mm de diámetro y 55 Mm de largo, perfectas para trabajos de carpintería
- Pack de 6 unidades con rosca parcial, ideal para uniones precisas en madera
[...]
Su diseño con rosca parcial es ideal para trabajos en madera, ya que permite un ajuste preciso sin dañar el material. La calidad de fabricación nacional y su acabado cincado te aseguran durabilidad en todos tus proyectos de carpintería y armado de muebles.
[...]
# Tornillo Madera Rosca Parcial 4X55 Mm 6 Un Tel
[...]
12
[...]
$1.840
[...]
### Tornillo Madera Rosca Parcial 4X55 Mm 6 Un Tel


Question: site:easy.com.ar cinta de pintor Easy Argentina


Accesorios para Pintar | Ofertas y Promos Bancarias - Easy
[...]
# Accesorios para Pintar
[...]
## Cinta de Pintor Obra UV 48 Mm X 40 Mts Rapifix
[...]
## Cinta de Pintor 24 Mm X 40 Mts UV Rapifix
[...]
## Cinta de Enmascarar 18 Mm x 40 Mts Rapifix
[...]
## Cinta de Enmascarar 36 Mm X 40 Mts Rapifix
[...]
## Cinta de Obra Pintor Azul 18 Mm X 40 Mts Doble A
[...]
## Cinta de Papel Autoadhesiva 36 Mm X 50 Mts Rapifix
[...]
## Cubeta para Pintor de Colgar 22 Cm Roja Easy
[...]
## Cinta de Enmascarar 24 Mm X 50 Mts Rapifix
[...]
## Cinta de Enmascarar 18 Mm X 40 Mts Doble A

Cinta para Pintor 24 Mm x 40 Mts Doble A - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

Pinturas Accesorios de pintura Accesorios para Pintar Cinta para Pintor 24 Mm x 40 Mts Doble A

Descripción

## Cinta para Pintor 24 Mm x 40 Mts Doble A

La cinta para pintor Doble A de 24 Mm x 40 Mts es el material ideal para lograr trabajos de pintura profesionales y prolijos. Fabricada en Argentina, esta cinta te garantiza un enmascarado perfecto en tus proyectos de pintura.

### Características Destacadas

- Fabricación nacional con altos estándares de calidad
- Especialmente desarrollada para enmascarado de pisos y usos generales
- No levanta la pintura al retirarla, protegiendo tus terminaciones
- Fuerte adhesión y máxima resistencia para un enmascarado seguro
- Medidas de 24 Mm de ancho por 40 Mts de largo, ideal para todo tipo de trabajos

### Por qué nos gusta la Cinta para Pintor Doble A

Esta cinta se destaca por su versatilidad y eficiencia en trabajos de pintura. Vas a lograr líneas perfectas y bordes prolijos sin dañar las superficies. Su adhesión controlada te permite trabajar con confianza, sabiendo que al retirarla no vas a tener sorpresas desagradables. Hacé tu compra ahora con retiro en sucursal o envío a domicilio.

Características Destacadas

Otras Características

Productos recomendados

Doble A

# Cinta para Pintor 24 Mm x 40 Mts Doble A

Referencia: 1209290

Exclusivo Online

$5.095

Doble A

### Cinta para Pintor 24 Mm x 40 Mts Doble A

Cantidad

＋

－

Comprar ahora

Agregar al carrito

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Envío

Retiro

Stock en tienda

Ver tiendas disponibles

## Especificaciones técnicas

| Propiedad | Especificación |
| --- | --- |

Mostrar más

Cinta Premium para Pintor 36 Mm X 40 Mts C900 Doble A - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

Pinturas Accesorios de pintura Accesorios para Pintar Cinta Premium para Pintor 36 Mm X 40 Mts C900 Doble A

Descripción

## Cinta Premium para Pintor 36 Mm X 40 Mts C900 Doble A

Esta cinta premium para pintor de Doble A te ofrece la precisión y calidad que necesitás en tus trabajos de pintura. Con 40 metros de longitud y 36 mm de ancho, es el material ideal para lograr acabados profesionales en tus proyectos de renovación.

### Características Destacadas

- Fabricación nacional con estándares de calidad premium
- Apta para uso en interiores y exteriores
- Excelente adherencia sobre látex, yeso, paredes y barnices
- Fácil despegue que no deja residuos en las superficies

### Por qué nos gusta la Cinta Premium para Pintor Doble A

Esta cinta se destaca por su versatilidad y eficiencia en todo tipo de trabajos de pintura. Al ser de fabricación nacional, garantiza la calidad que necesitás para tus proyectos, permitiéndote lograr terminaciones prolijas y profesionales. Su fácil remoción sin dejar rastros te ahorra tiempo y evita retoques innecesarios.

Aprovechá esta herramienta indispensable para tus trabajos de pintura. Hacé tu compra ahora con retiro en el punto de entrega más próximo o envío a domicilio.

Características Destacadas

Otras Características

Productos recomendados

Doble A

# Cinta Premium para Pintor 36 Mm X 40 Mts C900 Doble A

Referencia: 1204023

Exclusivo Online

$6.995

Doble A

### Cinta Premium para Pintor 36 Mm X 40 Mts C900 Doble A

Cantidad

＋

－

Comprar ahora

Agregar al carrito

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Envío

Retiro

Stock en tienda

Ver tiendas disponibles

## Especificaciones técnicas

| Propiedad | Especificación |
| --- | --- |

Mostrar más

Cinta de Pintor Premium 48 Mm x 40 Mts Doble A - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

Pinturas Accesorios de pintura Accesorios para Pintar Cinta de Pintor Premium 48 Mm x 40 Mts Doble A

Descripción

## Cinta de Pintor Premium 48 Mm x 40 Mts Doble A

La cinta de pintor Premium Doble A es el material ideal para lograr terminaciones profesionales en tus trabajos de pintura. Con 48 Mm de ancho y 40 Mts de largo, te asegura un trabajo limpio y preciso en cualquier superficie.

### Características Destacadas

- Ideal para uso en paredes, marcos y superficies diversas
- Color azul que facilita la visualización durante la aplicación
- Material de fabricación nacional con estándares de calidad premium
- 40 Mts de longitud para proyectos extensos
- Ancho de 48 Mm, perfecto para cubrir bordes y superficies medianas a grandes

### Por qué nos gusta la Cinta de Pintor Premium Doble A

Esta cinta de pintor se destaca por su calidad superior y facilidad de uso. Su diseño profesional te permite realizar trabajos de pintura con terminaciones perfectas, sin dejar residuos al retirarla. Es el material adecuado para quienes buscan resultados profesionales en sus proyectos de pintura. Aprovechá para conseguir tu cinta de pintor premium y dale un acabado profesional a tus trabajos. Hacé tu compra ahora con retiro en sucursal o envío a domicilio.

Características Destacadas

Otras Características

Productos recomendados

Doble A

# Cinta de Pintor Premium 48 Mm x 40 Mts Doble A

Referencia: 1204024

Exclusivo Online

-15%¡Ahorrás $ 1.319,25!

$7.475,75

$8.795

Doble A

### Cinta de Pintor Premium 48 Mm x 40 Mts Doble A

Cantidad

＋

－

Comprar ahora

Agregar al carrito

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Envío

Retiro

Stock en tienda

Ver tiendas disponibles

## Especificaciones técnicas

| Propiedad | Especificación |
| --- | --- |

Mostrar más

Cinta de Enmascarar 24 Mm X 40 Mts Alte Doble A - Easy
[...]
Pinturas Accesorios de pintura Accesorios para Pintar Cinta de Enmascarar 24 Mm X 40 Mts Alte Doble A
[...]
## Cinta de Enmascarar 24 Mm X 40 Mts Alte Doble A
[...]
Descubrí la cinta de enmascarar Alte Doble A, el material ideal para tus trabajos de pintura y decoración. Con 24 Mm de ancho y 40 Mts de largo, vas a tener la herramienta perfecta para lograr terminaciones prolijas y profesionales.
[...]
- Fabricación nacional de calidad garantizada
- Color beige clásico que permite identificar fácilmente las áreas enmascaradas
- Largo de 40 Mts para cubrir grandes superficies
- Ancho de 24 Mm, ideal para trabajos de precisión y detalles
[...]
### Por qué nos gusta la Cinta de Enmascarar Alte Doble A
[...]
Esta cinta de enmascarar es el material perfecto para conseguir bordes limpios y definidos en tus proyectos de pintura. Su adhesión equilibrada permite removerla sin dejar residuos, protegiendo las superficies que no querés pintar. Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.
[...]
Doble A
[...]
# Cinta de Enmascarar 24 Mm X 40 Mts Alte Doble A
[...]
Referencia: 519550
[...]
Exclusivo Online
[...]
-15%¡Ahorrás $ 569,25!
[...]
$3.225,75
[...]
$3.795
[...]
Doble A
[...]
### Cinta de Enmascarar 24 Mm X 40 Mts Alte Doble A


Question: site:easy.com.ar serrucho caja inglete Easy Argentina


Caja Ingleteadora 33 Cm de Corte Plástica Robust - Easy
[...]
Herramientas Herramientas manuales Corte y desbaste de madera Caja Ingleteadora 33 Cm de Corte Plástica Robust
[...]
## Caja Ingleteadora 33 Cm de Corte Plástica Robust
[...]
Esta caja ingleteadora Robust de 33 cm es la herramienta ideal para lograr cortes precisos en madera. Su diseño práctico te permite realizar cortes en diferentes ángulos con total exactitud.
[...]
### Características Destacadas Caja Ingleteadora Robust
[...]
- Diseño ergonómico que facilita su manipulación y uso
- Sistema de ajuste de ángulos para cortes precisos en madera
- Fabricada en plástico resistente, con un peso liviano de 474 grs
- Dimensiones compactas de 33x10x10 cm, perfecta para espacios reducidos
[...]
### Por qué nos gusta la Caja Ingleteadora Robust
[...]
Esta herramienta se destaca por su practicidad y versatilidad. Te va a permitir realizar cortes en madera con diferentes ángulos de manera precisa, siendo una excelente opción para carpinteros tanto profesionales como aficionados. Su construcción en plástico la hace liviana y fácil de transportar.
[...]
# Caja Ingleteadora 33 Cm de Corte Plástica Robust
[...]
Referencia: 9009652
[...]
Exclusivo Online
[...]
$10.900
[...]
### Caja Ingleteadora 33 Cm de Corte Plástica Robust

Caja para Ingleteadora Madera Silver Shadow - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

Herramientas Herramientas manuales Corte y desbaste de madera Caja para Ingleteadora Madera Silver Shadow

Descripción

## Caja para Ingleteadora Madera Silver Shadow

Optimizá el espacio y la organización de tu taller con esta caja especialmente diseñada para ingleteadora. Fabricada en Argentina con madera resistente, te ofrece una solución práctica para mantener tu herramienta protegida y a mano.

### Características Destacadas

- Sistema de almacenamiento específico para ingleteadora
- Estructura compartimentada para mejor organización y protección
- Fabricación nacional de alta calidad
- Diseño robusto en madera de color marrón, ideal para uso profesional

### Por qué nos gusta la Caja para Ingleteadora Silver Shadow

Esta caja se destaca por su construcción sólida y funcional, pensada específicamente para proteger tu ingleteadora. Su diseño local garantiza que cumple con las necesidades del profesional argentino, brindándote un espacio seguro y ordenado para guardar tu herramienta.

Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.

Características Destacadas

Otras Características

Productos recomendados

Silver Shadow

# Caja para Ingleteadora Madera Silver Shadow

Referencia: 1239230

Exclusivo Online

$12.675

Silver Shadow

### Caja para Ingleteadora Madera Silver Shadow

Cantidad

＋

－

Comprar ahora

Agregar al carrito

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Envío

Retiro

Stock en tienda

Ver tiendas disponibles

## Especificaciones técnicas

| Propiedad | Especificación |
| --- | --- |

Mostrar más

Caja de Inglete Plástica 35,5 Cm Silver Shadow - Easy

Código de ética

CencoPay

Club Easy

Mundo Experto

Venta Empresa

Contacto

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Mi Cuenta

Herramientas Herramientas manuales Corte y desbaste de madera Caja de Inglete Plástica 35,5 Cm Silver Shadow

Descripción

## Caja de Inglete Plástica 35,5 Cm Silver Shadow

Esta caja de inglete plástica Silver Shadow es el instrumento perfecto para realizar cortes precisos en diferentes ángulos. Con su diseño en color naranja de alta visibilidad y construcción resistente, vas a lograr cortes exactos en tus trabajos de carpintería.

### Características Destacadas Caja de Inglete Plástica Silver Shadow

- Guías precisas para cortes en diferentes ángulos
- Diseño ergonómico que facilita el uso manual
- Fabricada en plástico resistente de color naranja para mayor durabilidad
- Dimensiones prácticas de 35,5 x 10,1 x 5,4 Cm para un manejo cómodo

### Por qué nos gusta la Caja de Inglete Plástica Silver Shadow

Esta caja de inglete se destaca por su construcción sólida y su diseño funcional. Es una herramienta práctica que te va a ayudar a conseguir cortes precisos en tus proyectos de carpintería, siendo especialmente útil para trabajos que requieren exactitud en los ángulos.

Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.

Características Destacadas

Dimensiones

Materiales

Otras Características

Productos recomendados

Silver Shadow

# Caja de Inglete Plástica 35,5 Cm Silver Shadow

Referencia: 1008188

Exclusivo Online

-15%¡Ahorrás $ 2.392,5!

$13.557,50

$15.950

Silver Shadow

### Caja de Inglete Plástica 35,5 Cm Silver Shadow

Cantidad

＋

－

Comprar ahora

Agregar al carrito

Cargando...

Tu ubicación

Ayudanos a localizarte para verificar disponibilidad y cobertura en tu zona.

Seleccionar ubicaciónUsar ubicación actual

Envío

Retiro

Stock en tienda

Ver tiendas disponibles

## Especificaciones técnicas

| Propiedad | Especificación |
| --- | --- |

Mostrar más

Sierras e Ingletadoras Estacionarias | Aprovechá las Ofertas - Easy
[...]
# Ingletadoras y Sierras
[...]
27 Productos
[...]
## Ingleteadora Telescópica 10" 1800 W Einhell
[...]
## Ingleteadora 8 1/4" 1800W TC-SM 2131/2 Einhell
[...]
## Sierra Ingletadora 10" 1650 W DeWalt
[...]
## Ingleteadora 8" 1200 W Robust
[...]
## Cepillo Eléctrico Carpintero 204 Mm 1500 W TC-SP 204 Einhell
[...]
## Sierra Sensitiva 14" 2300 W DeWalt
[...]
## Sierra de Mesa 254 Mm 1800 W 4250 Rpm TC-TS 254 ECO Einhell
[...]
## Disco de Sierra Circular para Madera 184 Mm 40 Dientes Bosch
[...]
## Ingleteadora 8" 216x30 Mm 1400 W TC-MS 216 Einhell
[...]
## Disco de Sierra con Dientes
[...]
## Lijadora de Banda y Disco 300 W Einhell
[...]
## Ingleteadora Telescópica 10" 1900 W TC-SM 2531/2 U Einhell
[...]
## Sierra Sensitiva 355 Mm 2200 W 3800 Rpm GCO 220 Bosch
[...]
## Ingleteadora 210 Mm 1400 W TC-MS 2112 Einhell
[...]
## Ingletadora 10" 1500 W MSL 100 Makita

Serrucho de Madera 20" Bremen - Easy

Serrucho de Madera 20" Bremen - Easy
[...]
Herramientas Herramientas manuales Corte y desbaste de madera Serrucho de Madera 20" Bremen
[...]
## Serrucho de Madera 20" Bremen
[...]
El serrucho Bremen de 20" es una herramienta fundamental para tus trabajos de carpintería y construcción. Con su diseño ergonómico y hoja de alta calidad, vas a lograr cortes precisos en madera con el mínimo esfuerzo.
[...]
### Características Destacadas Serrucho de Madera 20" Bremen
[...]
- Ideal para cortes rectos en madera y derivados
- Diseño robusto y duradero para uso frecuente
- Mango ergonómico con agarre antideslizante en color azul
- Hoja de acero de 20" con dientes afilados para cortes eficientes
[...]
### Por qué nos gusta el Serrucho de Madera 20" Bremen
[...]
Este serrucho se destaca por su construcción sólida y su capacidad para realizar cortes limpios y precisos. La combinación de su mango ergonómico y su hoja de calidad te permite trabajar de forma cómoda y segura en todos tus proyectos de carpintería.
[...]
Hacé ahora tu compra con retiro en el punto de entrega más próximo o envío a domicilio.
[...]
# Serrucho de Madera 20" Bremen
[...]
Referencia: 1386034
[...]
Exclusivo Online
[...]
$15.200
[...]
### Serrucho de Madera 20" Bremen
[...]
## Especificaciones


terminal

Output: pipo-deploy is /home/ubuntu/.local/bin/pipo-deploy


     1|#!/usr/bin/env bash
     2|set -euo pipefail
     3|
     4|if [[ $# -lt 1 || $# -gt 2 ]]; then
     5|    echo "Usage: pipo-deploy <port> [name|agent/site]" >&2
     6|    exit 1
     7|fi
     8|
     9|port="$1"
    10|target="${2:-$port}"
    11|
    12|if ! [[ "$port" =~ ^[0-9]+$ ]]; then
    13|    echo "Port must be numeric." >&2
    14|    exit 1
    15|fi
    16|
    17|if (( port < 3001 || port > 3010 )); then
    18|    echo "Port must be between 3001 and 3010." >&2
    19|    exit 1
    20|fi
    21|
    22|if ! curl -fsS --max-time 2 "http://127.0.0.1:${port}/" >/dev/null; then
    23|    echo "Nothing is responding on http://127.0.0.1:${port}/" >&2
    24|    exit 1
    25|fi
    26|
    27|path="$(
    28|TARGET="$target" PORT="$port" python3 - <<'PY'
    29|import os
    30|import re
    31|import sys
    32|
    33|target = os.environ["TARGET"].strip()
    34|port = os.environ["PORT"].strip()
    35|
    36|def sanitize_segment(value: str) -> str:
    37|    value = value.lower()
    38|    value = re.sub(r"[^a-z0-9]+", "-", value)
    39|    return value.strip("-")
    40|
    41|if "/" in target:
    42|    raw_parts = [part for part in target.strip("/").split("/") if part]
    43|    parts = [sanitize_segment(part) for part in raw_parts]
    44|    parts = [part for part in parts if part]
    45|    if not parts:
    46|        parts = [port]
    47|    print("/" + "/".join(parts) + "/")
    48|else:
    49|    name = sanitize_segment(target)
    50|    if not name:
    51|        name = port
    52|    print(f"/preview/{name}/")
    53|PY
    54|)"
    55|
    56|if [[ "$path" == "/" ]]; then
    57|    echo "Refusing to publish to /." >&2
    58|    exit 1
    59|fi
    60|
    61|"/home/ubuntu/.local/bin/openclaw-serve-guard"
    62|tailscale serve --bg --set-path "$path" "http://127.0.0.1:${port}" >/dev/null
    63|
    64|host="$(
    65|python3 - <<'PY'
    66|import json
    67|import subprocess
    68|
    69|raw = subprocess.check_output(["tailscale", "status", "--json"], text=True)
    70|data = json.loads(raw)
    71|print(data["Self"]["DNSName"].rstrip("."))
    72|PY
    73|)"
    74|
    75|printf 'Preview available at https://%s%s\n' "$host" "$path"
    76|


Explanation:
**Planning app features**

I'm considering what we can build under the directory. I'll include things like copies of specific image files and maybe create an SVG icon. For the HTML content, I think about a fixed bottom navigation for mobile with options like “Hoy” and “Checklist.”

Also, planning features like shopping cards with checkboxes, progress statuses, toggles for rented tools, and a dynamic brand wall with margin calculations using JavaScript. There’s also a potential LED simulator and an option for printing the checklist.
**Considering font options**

I’m thinking about embedding CSS in a way that keeps things detailed but not too overwhelming. I might use system fonts like Inter from Google, which could be a good choice—though it won’t work offline. So, I guess it’s wise to provide a CSS fallback in case Inter isn’t available. That way, I can ensure compatibility and keep the design looking good without relying solely on external fonts.

mkdir -p /home/ubuntu/.hermes/artifacts/panel-install-site/assets && cp /home/ubuntu/.hermes/cache/images/openai_codex_gpt-image-2_living_panel_right_edit.png /home/ubuntu/.hermes/artifacts/panel-install-site/assets/mockup-right.png && cp /home/ubuntu/.hermes/artifacts/living-panel-installation-plan.png /home/ubuntu/.hermes/artifacts/panel-install-site/assets/technical-infographic.png && file /home/ubuntu/.hermes/artifacts/panel-install-site/assets/*


Output:
/home/ubuntu/.hermes/artifacts/panel-install-site/assets/ikea-01-measure-frame.png: PNG image data, 1024 x 1536, 8-bit/color RGB, non-interlaced
/home/ubuntu/.hermes/artifacts/panel-install-site/assets/ikea-02-fix-led.png:       PNG image data, 1024 x 1536, 8-bit/color RGB, non-interlaced
/home/ubuntu/.hermes/artifacts/panel-install-site/assets/ikea-03-glue-panels.png:   PNG image data, 1024 x 1536, 8-bit/color RGB, non-interlaced
/home/ubuntu/.hermes/artifacts/panel-install-site/assets/mockup-right.png:          PNG image data, 1024 x 1536, 8-bit/color RGB, non-interlaced
/home/ubuntu/.hermes/artifacts/panel-install-site/assets/technical-infographic.png: PNG image data, 1600 x 2450, 8-bit/color RGB, non-interlaced


<!doctype html>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="theme-color" content="#11100e" />
  <meta name="description" content="Guía dinámica para comprar e instalar panel varillado EPS con bastidor oculto y LED indirecto." />
  <link rel="manifest" href="manifest.json">
  <title>Panel varillado living · guía de obra</title>

Panel varillado living
Guía dinámica · Easy + instalación mañana

<button class="btn" id="themeBtn">🌗 Tema</button><button class="btn primary" onclick="window.print()">🖨 Imprimir</button>

          Plan final: panel derecho + halo LED oculto

Mañana vas con esto abierto y no improvisás.

Shopping list, cortes, medidas de pared, LED, puntos de pegado y manual visual tipo IKEA. Los números exactos están en HTML; las láminas visuales fueron generadas con gpt-image-2.

121×250cm panel visible · 11 varillas EPS

110,8×240cm bastidor oculto 2×2

5 cmretraer frame desde borde del panel

7,02 mLED útil alrededor del frame

Ubicación default: no centrado. Panel visible a 40 cm del borde derecho de la pared, mucho más cerca del sillón/lado derecho. Podés ajustar el margen abajo en “Medidas”.

Mockup sobre tu foto original121×250 cmhalo cálido

Shopping list para Easy

Checklist persistente. Tocás cada cosa cuando la comprás.

0/0 comprado

Materiales principales

Herramientas si asumimos cero herramientas

Total estimado

Materiales principales con precio visto	—

Fijaciones / cinta / herramientas	a confirmar

Compra mínima si ya conseguís herramientas	—

Ojo adhesivo: al ser EPS, no uses adhesivos con solvente tipo contacto agresivo. Pedí PU/MS polímero / montaje sin solventes apto EPS. Si dudan, probá en un pedacito.

          <button class="btn accent" id="copyEasy">Copiar pedido para Easy</button>

Medidas y marcas

Ajustá cuánto lo querés acercar al lado derecho. Default: 40 cm.

pared 310×255 cm

          <svg class="wall-svg" viewBox="0 0 620 520" role="img" aria-label="Diagrama de pared, panel visible y bastidor oculto">
            <defs>
              <filter id="glow"><feGaussianBlur stdDeviation="6" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
              <linearGradient id="wood" x1="0" x2="1"><stop stop-color="#9b5a23"/><stop offset="1" stop-color="#d3944b"/></linearGradient>
            </defs>
            <rect x="40" y="40" width="540" height="445" rx="8" fill="var(--paper)" stroke="var(--line)" stroke-width="2"/>
            <text x="310" y="28" text-anchor="middle" class="svg-text">PARED 310 × 255 cm</text>
            <g id="svgDynamic"></g>
            <line x1="40" y1="496" x2="580" y2="496" stroke="var(--muted)" stroke-width="2"/>
            <text x="310" y="515" text-anchor="middle" class="svg-muted">piso / zócalo</text>
          </svg>

          Margen derecho visible
Distancia panel → borde derecho de pared40 cm
          <input class="range" id="rightMargin" type="range" min="25" max="80" step="1" value="40">
          Retracción del frame / LED
Distancia desde borde del panel al canto exterior del frame5,1 cm
          <input class="range" id="inset" type="range" min="3" max="8" step="0.1" value="5.1">

Marca	Desde izquierda	Desde abajo

Regla de luz bella: 5 cm de “labio” oculta la tira y deja que la luz rebote. Menos de 3 cm = se ven puntitos. Más de 7 cm = halo más débil.

Cortes de madera

Esto es lo que tenés que pedir en Easy.

<button class="btn" id="copyCuts">Copiar cortes</button>

Cantidad	Corte	Uso

2	240 cm	laterales verticales

5	102 cm	travesaños internos

Comprás 5 tirantes de pino cepillado 2×2×2,44 m. Si Easy no corta, comprá serrucho + caja de inglete o pedí prestada una ingletadora.

Necesito 5 tirantes de pino cepillado 2×2×2,44 m. ¿Me los cortan así?
- 2 piezas de 240 cm
- 5 piezas de 102 cm
Los sobrantes me los llevo.

Por qué 102 cm

El frame exterior mide 110,8 cm. Los travesaños van entre dos laterales de 4,4 cm cada uno:

110,8 - 4,4 - 4,4 = 102 cm

Usá 5 travesaños: arriba, abajo y tres intermedios. Así cada varilla toca 5 puntos/líneas de adhesivo.

Modo IKEA

Láminas visuales generadas con gpt-image-2 + instrucciones exactas debajo.

sin chamuyo

          <button class="btn" role="tab" aria-selected="true" data-step="0">1 · Medir</button>
          <button class="btn" role="tab" aria-selected="false" data-step="1">2 · Frame + LED</button>
          <button class="btn" role="tab" aria-selected="false" data-step="2">3 · Pegar varillas</button>

1 · Medir y marcar

Definí margen derecho: recomendación 40 cm desde borde derecho de pared hasta borde derecho del panel.

Marcá rectángulo visible: 121×250 cm. Arriba y abajo dejá 2,5 cm.

Marcá rectángulo del frame adentro: 110,8×240 cm, retraído aprox. 5 cm por lado.

Chequeá con nivel antes de perforar. Si una línea queda torcida, se va a notar en las varillas.

⚠
Delicado: no intentes “corregir a ojo” después de pegar. La primera varilla manda todo el resto.

2 · Armar frame, fijar y probar LED

Armá el frame en el piso: 2 verticales de 240 cm + 5 travesaños de 102 cm.

Pre-perforá madera antes de atornillar para no rajar el pino.

Presentá en pared, nivelá, marcá. Perforá pared y usá tarugos/tornillos largos.

Pegá la tira LED en el canto exterior/lateral del frame, no en el frente.

Probá LED y fuentes 15 minutos antes de tapar todo.

⚡
Electricidad: fuente accesible y ventilada. No la encierres contra EPS. Si hay que hacer toma nueva, electricista.

3 · Pegar varillas EPS

Aplicá PU/MS en los 5 travesaños: puntos o cordones cortos, no enchastres toda la placa.

Primera varilla: nivel perfecto. Presioná en los 5 contactos.

Repetí 11 varillas lado a lado. Unión lateral: línea finísima o puntos mínimos.

Total de contactos útiles: 11 varillas × 5 travesaños = 55 puntos/líneas.

Cinta de pintor 24 h. No tires ni muevas el panel mientras cura.

🧪
EPS: nada con solvente. Si el adhesivo “huele a solvente fuerte”, sospechá. Probá antes.

Secuencia mañana

Orden práctico para no perderte.

0/0 hecho

<button class="btn" id="copyTodo">Copiar secuencia</button><button class="btn" id="resetAll">Reset checks</button>

Plano técnico completo

Infografía anterior, por si querés verla de corrido.

      🏠Inicio
      🛒Easy
      📐Medidas
      🧩IKEA
      ✅Obra


No linter for .html files


Panel varillado living

Guía dinámica para instalar panel varillado EPS con bastidor oculto y LED indirecto.