Architekturbüro

Für Architektur- und Innenarchitekturbüros. Die Leistungsphasen nach Honoraranteil, eine Haltung mit einer Skizze, die sich selbst zeichnet, ein Projektblatt mit Ansicht, Schnitt und Grundriss, Materialien zum Anfassen und eine Baukostenschätzung.

5 Variants

Kategorie wechseln

Leistungsphasen

Neun Phasen auf einer Schiene, jede so breit wie ihr Honoraranteil, gruppiert nach Abschnitt. Die Balken wachsen beim Scrollen, Zeigen oder Tabben öffnet, was der Bauherr bekommt. Auf dem Telefon eine Liste mit dem Anteil als kleinem Balken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/architecture

Bringt mit utils, kit, button, icon, section, motion, slider

Usage

<Architecture variant="work-phases" phases={[{ number: "1", title, share: 2, stage, text, deliverables: ["…"] }]} />

Source

Haltung

Ein großer Satz und vier Grundsätze, die aufsteigen. Daneben zeichnet sich eine Linienzeichnung auf Rasterpapier beim Scrollen Strich für Strich.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/architecture

Bringt mit utils, kit, button, icon, section, motion, slider

Usage

<Architecture variant="philosophy" statement="…" principles={[{ title, text }]} drawing={<svg>…paths with pathLength="1"…</svg>} />

Source

Projektblatt

Ansicht, Schnitt und Grundriss als Reiter, jede Zeichnung zeichnet sich Linie für Linie neu. Daneben die Daten im Haarlinienraster, die Meilensteine auf einer Linie, die sich füllt, und das Team.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/architecture

Bringt mit utils, kit, button, icon, section, motion, slider

Usage

<Architecture variant="project-sheet" project={{ name, place, year, type }} views={[{ id, label, media }]} facts={[{ label, value }]} milestones={[{ date, label }]} team={["…"]} />

Source

Materialien

Gezeichnete Muster aus Holz, Lehm, Stein und Metall, die sich beim Zeigen heben und zoomen. Eines wählen, ein großes Muster zeigt Herkunft, Einsatz und wie weit es reist.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/architecture

Bringt mit utils, kit, button, icon, section, motion, slider

Usage

<Architecture variant="materials" materials={[{ id, name, pattern: "wood", tone: "#b98a5e", origin, use, distance, text }]} />

Source

Baukostenschätzung

Gebäude, Fläche und Standard wählen. Die Kosten gleiten zu einem gerundeten Wert mit Spanne und Preis pro m², darunter wächst die Aufteilung nach Kostengruppe herein.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/architecture

Bringt mit utils, kit, button, icon, section, motion, slider

Usage

<Architecture variant="cost-estimate" types={[{ id, label, icon, rate: { mid: 2900 } }]} standards={[{ id, label }]} costGroups={[{ code: "300", label, share: 62 }]} />

Source

Details

Was Architekturbüro mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.0 · seit 1.1.0
Datei: components/ui/architecture.tsx
Bringt mit: utilskitbutton iconsectionmotionslider
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 23 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ArchitectureProps aus components/ui/architecture.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
ArchitectureVariant
work-phasesphilosophyproject-sheetmaterialscost-estimate
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
phasesoptional
ArchPhase[]
work-phases
principlesoptional
ArchPrinciple[]
philosophy: principles, and a line drawing whose paths carry pathLength="1" so they draw in on scroll
drawingoptional
React.ReactNode
statementoptional
string
philosophy: one sentence set large
projectoptional
{ name: string; place: string; year: string; type: string }
project-sheet
viewsoptional
ArchView[]
factsoptional
{ label: string; value: string }[]
teamoptional
string[]
milestonesoptional
{ date: string; label: string }[]
materialsoptional
ArchMaterial[]
materials
typesoptional
ArchBuildingType[]
cost-estimate
standardsoptional
{ id: string; label: string }[]
costGroupsoptional
{ code: string; label: string; share: number }[]
cost-estimate: cost groups with their share of the building cost in percent
areaoptional
number
cost-estimate: start area in m²
currencyoptional
string

Eingebaute Texte

Diese Texte schreibt Architekturbüro selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 23 Texte anzeigen

Schlüssel	Englisch	Deutsch
phases	Englisch Work phases	Deutsch Leistungsphasen
fee	Englisch {n}% of the fee	Deutsch {n} % des Honorars
youGet	Englisch What you get	Deutsch Was du bekommst
talk	Englisch Talk about your project	Deutsch Über dein Projekt sprechen
principles	Englisch What we stand for	Deutsch Wofür wir stehen
view	Englisch View	Deutsch Ansicht
facts	Englisch Project facts	Deutsch Projektdaten
team	Englisch Team	Deutsch Team
timeline	Englisch From first sketch to moving in	Deutsch Von der ersten Skizze bis zum Einzug
materials	Englisch Materials	Deutsch Materialien
origin	Englisch Source	Deutsch Herkunft
use	Englisch Used for	Deutsch Eingesetzt für
distance	Englisch Way to the site	Deutsch Weg zur Baustelle
km	Englisch {n} km	Deutsch {n} km
type	Englisch Building	Deutsch Gebäude
area	Englisch Gross floor area	Deutsch Bruttogrundfläche
standard	Englisch Standard	Deutsch Standard
estimate	Englisch Building cost, about	Deutsch Baukosten, etwa
range	Englisch Range {low} to {high}	Deutsch Spanne {low} bis {high}
perM2	Englisch {price} per m²	Deutsch {price} pro m²
groups	Englisch By cost group	Deutsch Nach Kostengruppe
note	Englisch Estimate for a first conversation. Plot, demolition and financing are not included.	Deutsch Schätzung für ein erstes Gespräch. Grundstück, Abriss und Finanzierung sind nicht enthalten.
request	Englisch Request a cost check	Deutsch Kostencheck anfragen

Aus dem Quellcode der Component abgeleitet.

Architekturbüro reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-controls, aria-expanded, aria-label, aria-labelledby, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen radio, radiogroup, tab, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Architekturbüro?

Mit aiw add @ai-website/architecture. Der Befehl legt die Datei components/ui/architecture.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion und slider. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Architekturbüro?

5 Varianten, Leistungsphasen, Haltung, Projektblatt, Materialien und Baukostenschätzung. Du wählst sie mit der Prop variant, zum Beispiel variant="philosophy".

Kann ich die Texte von Architekturbüro übersetzen?

Ja. Architekturbüro bringt 23 eigene Texte auf Deutsch und Englisch mit, etwa „Leistungsphasen“, „Was du bekommst“ und „Über dein Projekt sprechen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Architekturbüro einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Architekturbüro mit aiw_components und installieren sie mit aiw_add @ai-website/architecture. Nenn im Prompt die Variante, etwa variant="work-phases", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Architekturbüro ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Architecture-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Architekturbüro stehen.