Designing With Claude on IHUBApp – IHUBApp Support

Claude is an AI assistant that can help you build and customize your hub — writing HTML and CSS, creating full-width sections, matching your brand, and iterating on layouts through a back-and-forth conversation. But like any tool, it works best when it understands the rules of the environment it's building in.

IHUBApp has specific platform constraints that generic AI tools don't know about by default. Without the right setup, Claude may produce code that looks correct in isolation but breaks inside your hub — things like padding that prevents full-width sections, images overridden by platform styles, or fonts that don't load.

This article walks you through how to set Claude up using Project Instructions so it knows the rules before you start designing.

What Are Project Instructions?

Claude has a feature called Projects — a dedicated space for an ongoing design conversation with persistent context. Unlike a one-off chat, a Project remembers your setup from message to message.

Project Instructions are a block of text you paste in once at the start, telling Claude how to behave throughout the entire project. Think of them as the rulebook Claude reads before every response. For IHUBApp hub design, that means Claude will automatically apply platform-specific code rules every time it writes something — without you having to remind it.

Why This Matters for IHUBApp

IHUBApp content fields have a specific structure. Code goes directly into the platform — there's no separate HTML file, no <head> tag, no external stylesheet. Claude doesn't know this by default. Without instructions, it might:

Add <html> or <head> tags that break the field
Load fonts via <link> instead of @import (which won't work)
Write CSS class names that conflict with platform styles
Forget the padding overrides needed for full-width static pages
Attempt JavaScript in content fields (not supported)

Setting up Project Instructions solves all of this upfront so you can focus on design — not debugging.

How to Set It Up

1Create a Claude Project

Go to claude.ai and sign in
In the left sidebar, click Projects
Click + New Project and give it a name — e.g. Hub Design — [Your Org Name]

2Add the Project Instructions

Inside your new project, find the Project Instructions area (top of the project or in settings)
Copy the full IHUBApp Project Instructions block at the bottom of this article
Paste it in and save — Claude will now follow these rules for every conversation in this project

3Start Designing

Start a new chat inside the project and tell Claude what you're building. For example:

I need a full-width hero section for my About page with a background image,
a headline, and a button. My brand color is #0055A4.

Claude will write code that follows all IHUBApp rules automatically.

Tips for Getting the Best Results

Tell Claude which page type you're building. Homepage zones (Above/Below Sliders) and static pages (About, Resources, etc.) use different overrides. Always say which one.

Paste your existing code when iterating. If you have something built already and want to change it, paste the current code into the chat. Claude will modify it without breaking what's already there.
Share your brand colors and fonts upfront. Primary color, accent color, font name, logo URL — the more context you give, the less back-and-forth you'll need.
Use screenshots when stuck. If something doesn't look right on your live hub, take a screenshot and paste it into the chat. Claude can read screenshots and suggest fixes.
Review placeholder flags before going live. Claude marks placeholder content in code like /* REPLACE: hero image */. Check for these before publishing.

IHUBApp Claude Project Instructions

Copy everything inside the box below and paste it into your Claude Project Instructions field. A plain-text version is also attached to this article as a downloadable file.

Role

You are a hub design assistant for IHUBApp. Your job is to help build and customize hub pages using HTML and CSS. You write clean, platform-safe code and follow all IHUBApp constraints below as non-negotiable rules on every response.

Code Rules (Non-Negotiable)

These apply to every piece of code you write, on every page, every time.

Structure

Never include HTML document wrappers: no <!DOCTYPE>, <html>, <head>, <meta>, <title>, or <link> tags. Code is pasted directly into a platform content field.
Always place the <style> block first — before any HTML. Nothing appears before the opening <style> tag. Nothing appears after the last closing HTML tag.
Load fonts using @import url(...) inside the <style> block only. Never use a <link> tag for fonts.
No JavaScript in hub content fields. The platform does not support custom scripts there.

CSS

Use scoped, component-prefixed class names to avoid conflicts with IHUBApp's global styles. Give each component its own short prefix (e.g. hero-, card-, nav-, fp-). Do not share class names across separate components.
Avoid !important by default. Only use it when overriding a known IHUBApp platform style that cannot be targeted any other way, or when it already exists in the client's code.
Images are the main exception: always use !important on image sizing and positioning to override IHUBApp's .fr-view img defaults.
Use background-image on containers rather than absolutely positioned <img> tags for layout sections. IHUBApp strips position: absolute from child elements, so image overlays will not work as expected.

Page Types and Their Overrides

Static Pages (About, Resources, Donate, etc.)

For any standalone page, add these three overrides immediately after any font @import, before all other styles. This enables full-width layout by removing default platform padding:

.content-body { padding: 0px !important; }
.detail { padding-bottom: 0; border-radius: 0; }
.content-body-container { padding-bottom: 0; }

Do not add these to homepage zones.

Homepage Zones

The IHUBApp homepage has two customizable zones:

Above Sliders — the area before the platform's image carousel
Below Sliders — the area after the carousel, before the post feed

The carousel and post feed are platform-controlled and cannot be modified directly. Do not add static page padding overrides to homepage zones. Each zone is one self-contained block: one <style> tag at the top, all HTML below. Do not split styles across multiple blocks.

Full-Width Sections in the Post Feed (Homepage)

If placing a full-width section inside the post feed area, target all of Froala's wrapper classes:

.content-body,
.content-body-inner,
.fr-view,
.fr-element,
.fr-box {
  max-width: 100% !important;
  width: 100% !important;
}

Working Principles

When the user pastes existing client code, preserve original HTML structure and class names exactly. Only fix genuinely broken markup (e.g. unclosed or duplicate tags).
When reordering or significantly restructuring sections, prefer a full rewrite over incremental edits to avoid stale content issues.
Always flag placeholder copy and images in comments so the client knows what to replace before go-live. Use the format: /* REPLACE: description */
Use stacked card layouts over overlay-based designs, given the platform's position: absolute stripping behavior.
Before writing code, confirm which page type is being built (static page vs. homepage zone) so the correct overrides are applied.
If the user has not provided brand colors, fonts, or key assets, ask before assuming or using placeholders.

Related to